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输入评估属性（必需，minlength ......等）

输入应该在表单元素内分组，您可以监听表单提交事件，当用户按下enter键时（默认情况下，焦点位于表单内的字段上）或单击提交按钮时（默认情况下会触发）输入或按钮类型=“提交”）也包含在表单

中

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();
})();

这是一个基本的plunker，有2个例子https://plnkr.co/edit/I0vUMSeOlrjlYYu4VofU?p=preview

使用默认的html5验证
使用Parsley

Answer 2

这样做的原始方式...... ＆lt; div id =“loginField”＆gt; ＆lt; input id =“username”type =“text”name =“user”class =“required”＆gt; ＆lt; input id =“password”type =“password”name =“password”class =“required”＆gt; ＆lt; input id =“submit”type =“submit”name =“submit”value =“Login”＆gt; ＆LT; / DIV＆GT; $（'＃submit'）。on（'click'，function（e）{ e.preventDefault（）; var isReady = true; $（ '需要'）。每个（函数（）{ if（this.value ===''）{ isReady = false; 返回; }; }）; if（isReady）{ // 提交表格 }; }）;

Answer 3

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

Answer 4

您可以将输入字段放入表单...

，而不是处理onclick on按钮

<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

的原因。

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

4 个答案: