Question

我遇到了JS Validator插件的问题。据我所知，一切都设置正确，但错误容器不会被隐藏，也不会在单击提交时发生任何事情。控制台不会提醒我任何错误。

HTML：

<div class="error_container">
            <p>Please correct the following errors and try again:</p>
            <ul />
          </div>

          <form id="contact_form" class="pure-form pure-form-stacked">
              <fieldset>
                 <h1>Contact Us</h1>

                  <label for="name">Your Name:</label>
                  <input id="name" type="text" placeholder="Name">

                  <label for="email">Your Email:</label>
                  <input id="email" name="email" type="email" placeholder="Email Address">

                  <label for="message">Message:</label>
                  <textarea id="message" placeholder="Message"></textarea>


                  <button type="submit" id="contact_submit" class="pure-button pure-button-primary">Submit</button>
              </fieldset>
          </form>

JavaScript的：

  $(document).ready(function(){

    $('#contact_submit').on('click', function(e){

      e.preventDefault();

      $("#contact_form").validate({
        rules: {
              email: "required"
        },
        errorContainer: $('.error_container'),
        errorLabelContainer: $('.error_container ul'),
        wrapper: 'li'
      });

    });
  });

Answer 1

 Try to remove  e.preventDefault(); at begin 
 event.preventDefault() method stops the default action of an element from happening.

$(document).ready(function(){

    $('#contact_submit').on('click', function(e){

          $("#contact_form").validate({
            rules: {
                  email: "required"
            },
            errorContainer: $('.error_container'),
            errorLabelContainer: $('.error_container ul'),
            wrapper: 'li'
          });

        });
      });

Javascript Validator插件 - 无法让它与表单一起工作

1 个答案: