jQuery验证不适用于输入字段

时间:2022-02-17 16:36:15

I have jQuery validation for my input fields. But seems like not working :(

我对输入字段进行了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;
});

Here is my html form:

这是我的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/>

3 个解决方案

#1


1  

Here is how to code your jQuery validation.

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

I need to show it in a fiddle since the stacksnippet does not allow form submit

我需要在小提琴中显示它,因为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();
    }
  });
});

As mentioned by Rhys Bradbury an alternative is to add "required" to each field .
It may however not be supported by older browsers (like IE<10) for example)

正如Rhys Bradbury所提到的,另一种方法是在每个领域添加“必需”。然而,旧版浏览器(例如IE <10)可能不支持它

http://caniuse.com/#feat=form-validation

#2


1  

Why do this in jQuery? Why not use HTML required attribute on form inputs?

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

ref: http://www.w3schools.com/jsref/prop_text_required.asp

example:

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

FYI this is HTML5

仅供参考,这是HTML5

#3


0  

You can validate by two process.

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

process 1: Add following attribute into validated controls as one I edited from your source. Easiest way rest will be responsible of jQuery validation engine.

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

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

Process 2: If you want your controlled validation then you need write piece of code as follows.

过程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
       }
   }

}); 

You get more information from jQuery Website

您可以从jQuery网站获得更多信息

#1


1  

Here is how to code your jQuery validation.

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

I need to show it in a fiddle since the stacksnippet does not allow form submit

我需要在小提琴中显示它,因为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();
    }
  });
});

As mentioned by Rhys Bradbury an alternative is to add "required" to each field .
It may however not be supported by older browsers (like IE<10) for example)

正如Rhys Bradbury所提到的,另一种方法是在每个领域添加“必需”。然而,旧版浏览器(例如IE <10)可能不支持它

http://caniuse.com/#feat=form-validation

#2


1  

Why do this in jQuery? Why not use HTML required attribute on form inputs?

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

ref: http://www.w3schools.com/jsref/prop_text_required.asp

example:

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

FYI this is HTML5

仅供参考,这是HTML5

#3


0  

You can validate by two process.

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

process 1: Add following attribute into validated controls as one I edited from your source. Easiest way rest will be responsible of jQuery validation engine.

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

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

Process 2: If you want your controlled validation then you need write piece of code as follows.

过程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
       }
   }

}); 

You get more information from jQuery Website

您可以从jQuery网站获得更多信息