CODEWITHSUNDEEP
javascriptjquery
Tim Aych
Tim Aych

Reputation: 1365

Javascript Validator Plugin - Can't get it to work w/ form

I'm having trouble with the JS Validator plugin. As far as I can see, everything is set up correctly but the error container doesn't get hidden nor does anything happen upon clicking submit. Console doesn't alert me of any errors.

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'
      });

    });
  });

Upvotes: 0

Views: 43

Answers (1)

sshet
sshet

Reputation: 1160

 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'
          });

        });
      });

Upvotes: 1

Related Questions