Form validation with click event

Question

I have a form with validation:

       <form role="form" method="POST" action="" >
            <input type="password" class="form-control top-buffer-sm" placeholder="Password" name="password" required autofocus></input>
            <input type="email" class="form-control top-buffer-sm" placeholder="Email" name="email" required autofocus></input>
<div class="modal-footer">
    <button id="createUser" type="submit" class="btn btn-primary">Create</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

My submit button has an id and i need to do some other functionality before i submit the form:

      $('#createUser').click(function(){
            //check to see if validation passed
             //do custom stuff
             //now make ajax call

             $.ajax();
        });

but if the form is not valid, my ajax call is still being made, of course resulting in a server error. How do i check to see if the form passed the validation when i click the submit button? Thanks

Please don't use the jquery-validate tag unless the question is about the jQuery Validate plugin. — Sparky
– Sparky, Commented May 15, 2015 at 15:22

Mohamad · Accepted Answer · 2015-05-14 19:28:13Z

2

Why not list to the submit event on the form?

<form role="form" method="POST" action="" id="myForm">

Then:

$('#myForm').on('submit', function(event) {
  // Prevent form submission on click
  event.preventDefault();

  // Write the code the determins if the form is valid.
  // `this` refers to the form.
  if (formIsValidCondition) {
    // do Ajax call here
  } else {
    // Do return a response to the user
    return false;
  }
});

answered May 14, 2015 at 19:28

Mohamad

35.5k34 gold badges144 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BoundForGlory Over a year ago

@Mohamed - thanks for replying. bootstrap does the validation automatically. With the click event tied to my button, an ajax call will still be made despite the fact the form isnt valid. How do i check if the form passed bootstrap validation is my question.

Mohamad Over a year ago

@BoundForGlory Bootstrap has no built in client side validation library. So unless I misunderstand you, this isn't possible. Bootstrap doesn't validate anything. Are you using a 3rd party library on top?

BoundForGlory Over a year ago

@Mohamed - yes jquery does have built in validation not bootstrap jsfiddle.net/hTPY7/1113

Mohamad Over a year ago

@BoundForGlory I think you are mistaken. You are confusing Chrome's HTML 5 with jQuery/Bootstrap validation. Bootstrap has absolutely no validation whatsoever, not it should. It's a CSS framework. jQuery does not either. It's a client side JavaScript library where frameworks and other JS tools are built on top it. What you are seeing is Chrome's HTML 5 default validations. You can get rid of those by removing the word required from the input definition.

Sparky Over a year ago

@BoundForGlory, yes, like Mohamad said, you are confusing the HTML5 validation built into some browsers with a plugin. Neither Bootstrap nor jQuery have validation unless you download another script.

BoundForGlory · Accepted Answer · 2015-05-14 19:52:43Z

-1

Here's my answer:

$('#createUser').click(function(){
      var valid = $("form").valid();
      if (valid)///keep on trucking

answered May 14, 2015 at 19:52

BoundForGlory

4,44715 gold badges59 silver badges83 bronze badges

1 Comment

Mohamad Over a year ago

valid() is not a jQuery function. It's part of jQuery Validate, which is a separate library for validation, built on top of jQuery.

Collectives™ on Stack Overflow

Form validation with click event

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related