Question

例如，我在页面中有3个具有相同名称的表单。如何使用一种验证方法验证所有这些表单？

<form id="formID">
<input name="nick">
<input type="submit">
</form>

<form id="formID">
<input name="nick">
<input type="submit">
</form>

<form id="formID">
<input name="nick">
<input type="submit">
</form>

我只想同时验证所提交的表格。

$('#formID').validate({
})

我的解决方案不起作用。我还发现我无法添加不同的ID，因为这些表单位于PHP循环中且必须具有相同的ID。

Answer 1

当您需要将相同的.validate()方法应用于多个表单时，您只需要一个jQuery .each()，然后您可以通过form标记一次性定位它们。

$('form').each(function() {   // <- selects every <form> on page
    $(this).validate({        // <- initialize validate() on each form
        // your options       // <- set your options inside
    });
});

DEMO：http://jsfiddle.net/K6Tkn/

引用OP：

＆＃34;我还发现我无法添加不同的ID，因为这些表单位于PHP循环中且必须具有相同的ID。＆＃34;

然后你的PHP循环没有正确构建。 页面上的每个id都必须是唯一的，否则HTML标记无效。您只需使用class代替id即可。否则，如果页面上没有其他<form>元素，您可以使用$('form')将其全部定位，如上面的演示所示。

Answer 2

我为你创建了fiddle。如果你真的需要它们，请添加ids。

关键是将相同的类添加到表单并验证每个表单。

$('form.validateForm').each(function(key, form) {
    $(form).validate(); 
});

Answer 3

以下是在单个页面上验证多个表单的解决方案：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("form").submit(function () {

      var clikedForm = $(this); // Select Form

      if (clikedForm.find("[name='mobile_no']").val() == '') {
        alert('Enter Valid mobile number');
        return false;
      }
      if (clikedForm.find("[name='email_id']").val() == '') {
        alert('Enter  valid email id');
        return false;
      }

    });
  });
</script>

这对我有用。我在一个页面中为5个表单编写了这段代码。

Answer 4

$('form.formID').each(function(key, form) { 
 $(this).validate({ 
    rules: {
         
        nick:{
          required: true,
          lettersonly: true,
          minlength: 3,
        },          
    },
    messages: {
        nick: {
        lettersonly:"Only alphabetical characters",
        required: "Enter your name",
        },
    },

submitHandler: function(form) {  
var nick = $("#nick", form).val();
  $.ajax({
      url: "REDIRECT URL HERE",
      method: "POST",
      dataType : 'json',
      data: {nick:nick},
      success: function (data) {
         
      }
   });  
 }                          
  });
});

Answer 5

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<link href="<c:url value="/resources/js/bootstrap/3.3.7/css/bootstrap.min.css"/>" rel="stylesheet" />
<script src="<c:url value="/resources/js/bootstrap/jquery/1.9.1/jquery-1.9.1.min.js"/>"></script>
<script src="<c:url value="/resources/js/jquery_validation/jquery.validate.min.js"/>"></script>
<script src="<c:url value="/resources/js/bootstrap/3.3.7/js/bootstrap.min.js"/>"></script>
<style>
.error {
    color: red;
    font-size: 0.8em;
}

body {
    margin: 30px;
}
</style>
</head>
<body>

    <form id="formA">
        <input type="text" name="username" />
        <input type="submit" value="submit" />
    </form>

    <form id="formB">
        <input type="text" name="email" />
        <input type="submit" value="submit" />
    </form>

</body>

<script>
    $(document).ready(function() {
        $('#formA').validate({
            rules:{
                username:{
                    required:true,

                }
            }, 
            submitHandler:function(event){
                alert('prevent default');
                alert('submit handler for formA')
            }
        });
        $('#formB').validate({
            rules:{
                email:{
                    required:true,
                    email:true
                }
            }, 
            submitHandler:function(event){
                alert('prevent default');
                alert('submit handler for formB')
            }
        });
    });
</script>


</html>

Answer 6

受到@Irshad Khan的回答的启发，希望它可以帮助别人。在{jQuery

中将data-rule-required="true"应用于所需的HTML输入

$('form').submit(function (e) {
        e.preventDefault();
        var clikedForm = $(this);
        if (clikedForm.valid()) {
            alert('valid');
        } else {
            alert('not_valid');
        }
    });

Answer 7

只需在您的网页上插入以下代码＆amp;使用你想要的多种形式。

<script type="text/javascript">
        $(document).ready(function () {

            $('form').each(function () {
                $(this).validate({
                    // your options
                });
            });

        });
    </script>

在同一页面上验证多个表单

7 个答案: