Question

所以我使用这个jQuery validator plugin。我在页面上有两个不同ID的表单。以下是我的源代码。问题是此代码也验证页面上的第二个表单。该表单具有不同的ID。我不知道为什么会发生这种情况，因为我已经在.validate函数中指定了要定位的表单id。我希望此代码仅使用id ='new-students-1107'验证表单。有人可以看看以下代码有什么问题吗？

非常感谢任何帮助。感谢

   $(function() {
      // Setup form validation on the #new-students-1107
      $("#new-students-1107").validate({
        // Specify the validation rules
        rules: {
          //Email
          "email": {
            required: true,
            email: true
          },
          //First name
          "00N2800000AF5M9": "required",
          //Last name
          "00N2800000AF5MA": "required"
        },
        // Specify the validation error messages
        messages: {
          "email": {
            required: " Please enter your email address",
            "email": "Please enter a valid email address"
          },
          "00N2800000AF5M9": " Please enter your first name",
          "00N2800000AF5MA": " Please enter your last name"
        },
        // Custom errorPlacement start

        errorPlacement: function(error, element) {
          //Custom position: First Name
          if (element.attr("name") == "00N2800000AF5M9") {
            $(error).insertAfter("#00N2800000AF5M9");
          }
          //Custom position: Last Name
          else if (element.attr("name") == "00N2800000AF5MA") {
            $(error).insertAfter("#00N2800000AF5MA");
          }
          //Custom position: Email Address
          else if (element.attr("name") == "email") {
            $(error).insertAfter("#email");
          }
          // Default position: if no match is met (other fields)
          else {
            //error.append($('.errorTxt span'));
          }
        },
        // Custom errorPlacement End
        submitHandler: function(form) {
          form.submit();
        }
      });
    });

这是HTML ....

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="new_content_container_54215">
        <form id="existing-students-1107" class="form-1020 hide-form" action="https://www.xxxxxx.com/servlet/?encoding=UTF-8" method="POST">
            <label for="email">Email</label>
            <input id="email1" maxlength="80" name="email" size="20" type="text">
            <label for="00N2800000ACrRi">Enquiry Type:</label>
            <select id="00N2800000ACrRi" name="00N2800000ACrRi" title="Enquiry Type">
                <option value="">--None--</option>
                <option value="How to Apply">How to Apply</option>
                <option value="Scholarships">Scholarships</option>
                <option value="Leave Request">Leave Request</option>
                <option value="Other">Other</option>
            </select>
            <input type="hidden" id="subject" name="subject" value="Web Enquiry">
            <label for="description">Your Enquiry</label><textarea name="description" placeholder="Please provide a detailed description of your enquiry."></textarea>
            <input type="submit" name="existing-student-form" value="Submit">
        </form>
    </div>

    <div id="new_content_container_54244">
        <form id="new-students-1107" class="form-5678 hide-form" action="https://www.xxxxxx.com/servlet/?encoding=UTF-8" method="POST">
            <input type="hidden" name="retURL" value="http://www.xxxxxx.com/research">
            <label for="00N2800000AF5M9">First Name:</label>
            <input id="00N2800000AF5M9" maxlength="200" name="00N2800000AF5M9" size="20" type="text" aria-required="true" aria-invalid="true">
            <label for="00N2800000AF5MA">Last Name:</label>
            <input id="00N2800000AF5MA" maxlength="200" name="00N2800000AF5MA" size="20" type="text" aria-required="true">
            <label for="email">Email</label><input id="email2" maxlength="80" name="email" size="20" type="text" aria-required="true">
            <label for="00N2800000AF5M8">Date of Birth:</label>
            <span class="dateInput dateOnlyInput">
            <input id="00N2800000AF5M8" name="00N2800000AF5M8" size="12" type="date" aria-required="true"></span>
            <label for="description">Description</label><textarea rows="10" maxlength="5000" name="description" class="valid"></textarea>
            <input type="submit" name="new-student-form" value="Submit">
        </form>
    </div>

</body>
</html>

阻止jQuery验证器插件验证页面上的多表单

0 个答案: