jQuery验证对输入字段不起作用

jQuery validation not working for input fields

本文关键字：字段 不起作用 输入 验证 jQuery      更新时间：2023-09-26

我对输入字段进行了jQuery验证。但似乎不工作:(

$('form')
.submit(function() {
    var name = $.trim($('#TxtName').val());
    var dob = $.trim($('#TxtDesig').val());
    var salary = $.trim($('#TxtSalary').val());
    if (name === "" || dob === "" || salary ==="") {
        alert("All fields are mandatory");
    }
    return false;
});
这是我的html表单: 
<form class="form-group" method="post">
        <label class="control-label">Employee Name:</label> 
            <input class="form-control" type="text" id="TxtName" name="EmployeeName" value="" /><br />
        <label class="control-label">Designation:</label> 
            <input class="form-control" type="text" id="TxtDesig" name="Designation" value="" /><br />
       <label class="control-label">Salary:</label>
            <input class="form-control" type="date" id="TxtSalary" name="Salary" value=""/><br/>

下面是如何编写jQuery验证代码。

我需要在一个提琴显示它，因为stacksnippet不允许表单提交

https://jsfiddle.net/mplungjan/n6mcyf6x/

$(function() {
  $('form').on("submit", function(e) {
    var name = $.trim($('#TxtName').val());
    var dob = $.trim($('#TxtDesig').val());
    var salary = $.trim($('#TxtSalary').val());
    if (name === "" || dob === "" || salary === "") {
      alert("All fields are mandatory");
      e.preventDefault();
    }
  });
});

正如Rhys Bradbury所提到的，另一种选择是在每个字段中添加"required"。
但是旧的浏览器(例如IE<10)可能不支持

http://caniuse.com/壮举=表单验证

为什么在jQuery中这样做?为什么不在表单输入上使用HTML required属性?

参考:http://www.w3schools.com/jsref/prop_text_required.asp

的例子:

<input placeholder="required a value here please" required/>

这是HTML5

您可以通过两个过程进行验证。

流程1:将以下属性添加到验证控件中，作为我从您的源代码编辑的属性。最简单的方式休息将负责jQuery验证引擎。

 <input class="form-control" type="text" id="TxtName" name="EmployeeName" value="" required='' data-msg-required='Please provide name.'/>

过程2:如果你想要控制验证，那么你需要写一段代码如下:

$("#form").validate({
    rules:{   //Validation rules work on name attribute
         EmployeeName:{  //Condition Area
               required:true
         }
    },
   messages:{   //user information area
       EmployeeName:
       {
           required:"Please provide Employee Name"  /// Message to user for required fields
       }
   }
});
您可以从jQuery网站
获得更多信息
相关文章：