在使用JQuery提交之前如何确保表单有效？

Question

我正在尝试制作一个登录页面，并具有以下内容：

<div id="loginField">
    <input id="username" type="text" name="user" required></input> 
    <input id="password" type="password" name="password" required></input> 
    <input id="submit" type="submit" name="submit" value="Login"></input> 
</div>

我确保用户名和密码字段是必填字段。 登录成功后（为此，我们只说两个字段都不为空），登录将消失，并出现另一个视图。 无论如何，我检查了JQuery是否按下了登录按钮：

$(function(){
    $('#submit').on('click', function(){ 
          $('#loginField').hide();
          $('#differentView').show();});

问题是单击登录按钮时，所需的属性将被忽略，并显示下一个视图。 如何确保单击登录按钮时不忽略必需的属性？

Answer 1

必需的属性将被忽略，因为输入元素不在html表单元素内

要使用HTML5输入评估属性（必填，最小长度等）

输入应分组在一个form元素内，并且您可以侦听form提交事件，默认情况下，该事件在用户按下Enter键（焦点位于表单内的某个字段）或单击Submit按钮（input或button）时触发带有type =“ submit”）的表单，也封装在表单中

HTML

<form id="loginForm">
  <input id="username" type="text" name="user" required />
  <input id="password" type="password" name="password" required />
  <input id="submit" type="submit" name="submit" value="Login" />
</form>

使用Javascript

$(function(){
  $('#loginForm').on('submit', function (event) { 
        event.preventDefault(); // prevent default form submit page reload
        console.log('I will enter this handler only on valid form')
        $('#loginForm').hide();
        $('#differentView').show();
})();

这是一个带有2个示例的基本监听器https://plnkr.co/edit/I0vUMSeOlrjlYYu4VofU?p=preview

• 使用默认的html5验证
• 使用欧芹

Answer 2

一种粗略的方法...

<div id="loginField">
    <input id="username" type="text" name="user" class="required">
    <input id="password" type="password" name="password" class="required">
    <input id="submit" type="submit" name="submit" value="Login">
</div>

$('#submit').on('click', function(e){
    e.preventDefault();
    var isReady = true;
    $('.required').each(function(){
        if (this.value === '') {
            isReady = false;
            return;
        };
    });
    if (isReady) {
        // submit form
    };
});

Answer 3

您可以使用以下库： Parsley 。 它是一个javascript表单验证库，非常易于使用，您可以根据自己的方式自定义它。 祝好运！

Answer 4

您可以将输入字段放入表单中，而不是处理onclick按钮。

<form action="post" method="post" id="loginField">
    <input id="username" type="text" name="user" required></input> 
    <input id="password" type="password" name="password" required></input> 
    <input id="submit" type="submit" name="submit" value="Login"></input> 
</form>

...并且在jQuery中，您可以像这样处理提交动作：

$(document).ready(function(){
  $('#loginField').on('submit', function(event){ 
      event.preventDefault();
      var [username password] = $(this).serializeArray(),
          username = username.value,
          password = password.value; 
      /* some validations */
  });
});

event.PreventDefault阻止浏览器提交，因此您的页面不会刷新。 serializeArray返回对象数组（键值），这就是为什么必须使用.value的原因