Question

首先，我有一个验证脚本，它工作正常，如果我为警告框添加了一个脚本，验证功能不起作用。我需要的是，首先，验证器应该执行，之后，按钮的警报应该执行。

<script>
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });

    $( "#ContactForm1" ).validate({
        rules: {
            fname: "required",
            lname: "required",
            phone: "required",
            email: {
                required: true,
                email: true
            },
            message: "required",
        }
    });
</script>

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            alert("Hello World!");
        });
    });
</script>

Answer 1

使用submitHandler：

$("#ContactForm1").validate({
  rules: {
    fname: "required",
    lname: "required",
    phone: "required",
    email: {
      required: true,
      email: true
    },
    message: "required",
  },
  submitHandler: function() {
    alert("Hello World!");
  }
});

Answer 2

这是一个有效的例子。要检查您的表单是否有效，只需使用： if ($( "#ContactForm1" ).valid())

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
    });
    $( "#ContactForm1" ).validate({
    rules: {
                fname: "required",
                lname: "required",
                phone: "required",
                email: {
                            required: true,
                            email: true
                        },
                message: "required",
        },
    submitHandler: function() {
      //$('#btn').click();
    }}
    );
                                                                                                                            src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">

    $(document).ready(function(){
    $("#btn").click(function(){
          if ($( "#ContactForm1" ).valid()) {
              alert('runs only if form is valid');
          }
     });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>

<form id="ContactForm1" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="fname">Name (required, at least 2 characters)</label>
      <input id="cname" name="fname" minlength="2" type="text" required>
    </p>
    <p>
      <label for="email">E-Mail (required)</label>
      <input id="email" type="email" name="email" required>
    </p>
    <p>
      <label for="phone">Phone (optional)</label>
      <input id="phone" type="phone" name="phone">
    </p>
    <p>
      <label for="phone">URL (optional)</label>
      <input id="phone" type="phone" name="phone">
    </p> 
    <p>
      <label for="message">Your message (required)</label>
      <textarea id="message" name="message" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
    <p>
        <button type="button" id="btn">Your button</button>
    </p>
  </fieldset>

</form>

验证器完成后应运行jquery click函数

2 个答案: