Determine if the "Enter" key has been pressed and validate the

How can I implement Enter key press functionality to login to the system using JavaScript? Below is the code snippet:

@using (Html.BeginForm("Login", "InventoryBarcode", FormMethod.Post, new { id = "main" }))
{
    <label for="LoginName" class="uname">Account</label>
    <input type="text" name="LoginName" id="LoginName" value="" placeholder="Please Enter Account" />
    <label for="LoginPassword" class="youpasswd">Password</label>
    <input type="password" name="LoginPassword" id="LoginPassword" value="" placeholder="Please Enter Password" />
    <asp:TextBox ID="txtLoginPassword" runat="server" TextMode="Password" placeholder="Please Enter Password"></asp:TextBox>
    <span id="message" style="color:red">@ViewBag.Message</span>
    <input type="button" name="Login" id="Login" value="login" onclick="Check();" />
}

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript">
function Check() {
    if ($.trim($("#LoginName").val()) === "") {
        $("#message").text('Please Enter Account!');
        return false;
    }
    if ($.trim($("#LoginPassword").val()) === "") {
        $("#message").text('Please Enter Password!');
        return false;
    }
    $("#Login").hide();
    $("#message").text('Login Please Wait...');
    $("#main").submit();
}
$(document).keypress(function(event) {
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13'){
    Check();
  }
});
</script>

Answer №1

Make sure to set up the submit handler as follows:

<input type="submit" name="Login" id="Login" value="login" />
$("#main").on("submit", function(e) {
  if ($.trim($("#LoginName").val()) === "") {
    $("#message").text('Please Enter Account!');
    return false;
  }
  if ($.trim($("#LoginPassword").val()) === "") {
    $("#message").text('Please Enter Password!');
    return false;
  }
  $("#Login").hide();
  $("#message").text('Login Please Wait...');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please submit the form to log in with your credentials

Here is the HTML code snippet for a form where users can enter their username and password to log in: <form Name ="form1" Method ="POST" ACTION = "userlogin.php" id="form1"> <div id="main_body" class="full-width"> <label>User ...

React display

I've been working on a personal project and wanted to include a lottery wheel. I came across the 'lottery-wheel' package on npm, but unfortunately, my attempts to install and render it were unsuccessful. To install the package, I used the f ...

Exploring ways to incorporate mouse movements into this simple JavaScript script

I have recently decided to convert my JavaScript code into jQuery code to incorporate mouse events. After downloading the latest version of jQuery and renaming it as "jquery.js," I made modifications to my manifest.json file by adding "jquery.js." However, ...

A guide on implementing listings in React Native through the use of loops

I am trying to display the data retrieved from an API, but I am encountering an error. // Retrieving the data. componentWillMount() { tokenner() .then(responseJson => { const token = "Bearer " + responseJson.result.token; ...

Tips on updating Angular data model when a static HTML element changes

Currently, I am utilizing the editable-table jQuery plugin to enable editing in a table. This tool is simple to implement, lightweight, and highly efficient. The markup structure for this task looks like this: <tr ng-repeat="o in orders"> <td ...

Having issues with angular-file-upload failing to include the file in the request

I am currently using angular-file-upload in order to upload an image to a server that is utilizing Node and Express 4.0. However, I am encountering difficulties in accessing the file data on the server. Below is the relevant code snippet: <input type= ...

When sending a response using res.send, it is not possible to include all properties of

I'm working with an API controller method that looks like this: let object = { "key1": "value1", "key2": "value2", "arrayKey": [ { "arrKey": "arrValue", "arrKey1": 1 } ] } export const foo = ...

Guide to filtering an array within ag-grid when defining a column

After switching from using DataTable to ag-grid, I encountered a challenge. In DataTable, I accessed the first element from the attributes array where typeName='ItemType'. Now, I am looking to achieve the same functionality in ag-grid. Any sugges ...

Using Express.js to leverage Vega for generating backend plots

Exploring ways to create plots using backend code and transfer them to the front end for display. Could it be feasible to generate plots on the server-side and then transmit them to the front end? I am interested in implementing something similar to this: ...

Container holding a Material-UI drawer

Is it possible to set the material-ui drawer inside a container in reactjs? I have wrapped my app page in a container with a maximum width of 600px. I want the drawer to start within that container instead of on the body page (picture). The app bar positi ...

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

The functionality of Vue slot-scope seems to be restricted when used within nested child components

Here is the component configuration being discussed: Vue.component('myComponent', { data () { return { msg: 'Hello', } }, template: ` <div class="my-component"> <slot :ms ...

What steps can be taken to repair the script?

https://jsfiddle.net/fnethLxm/10/ $(document).ready(function() { parallaxAuto() }); function parallaxAuto() { var viewer = document.querySelector('.viewer.active'), frame_count = 5, offset_value = 500; // init control ...

Selenium with Javascript

I am currently working on a website that utilizes the jquery.treeview.js plugin to display multiple nested branches. Each branch contains a JavaScript button: <a href="javascript:void(0);" id="show_link" class="show_links" onclick="$(this).parent().chi ...

The autocomplete feature is not displaying the data in the Bootstrap modal, only the list is visible

Having trouble with autocomplete in the bootstrap modal. The search for a book only shows black dots. Any solutions to this issue? As shown in the image, I've attempted to use CSS z-index but the problem persists. https://i.sstatic.net/e1ga9.png publi ...

The Vue.js class bound to the object remains static even after the object is updated

When I have a number of buttons, generated using the v-for directive, with each button having an initial class based on a string from an object. There is an event that changes this string when a button is clicked. However, the class does not get updated a ...

Setting up a plan for executing Javascript server side scripts

Can JavaScript be executed server-side? If I attempt to access a script , can it be scheduled to run every four hours? Would most web hosts allow this, or is it considered poor webmaster practice? The main goal is to activate my website's webcrawler/ ...

Encountered an issue during the creation of a Nuxt.js project using the command line tool, where a SyntaxError was triggered

I encountered an issue while attempting to set up a nuxt.js starter project using the nuxt cli. Here are the steps I followed: Installed vue cli globally with the command: npm install -g vue-cli Created the project using: vue init nuxt-community/star ...