CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user6824563
user6824563

Reputation: 815

Validate required fields before JQuery submit form

I have a form with required fields like this:

<form id="testForm" NAME="testForm" ACTION="./test2.html" METHOD="post">
    <INPUT TYPE="text" Name="name" required="yes" />
    <INPUT TYPE="text" Name="name2"  />

    <INPUT class="btn btn-primary" TYPE="button" onclick="jsSubmit();" VALUE="Submit" ID="SubmitButton1">
</form>

If I click on Submit, it won't submit if the input "name" is empty which is what I want.

But if I do it in JQuery:

function jsSubmit(){
    if(/*Some necessary validation for other fields*/){
        // submit form
        $("#testForm").submit();
    } else {
        // alert date error
        $("#msgError").html('Error');
        $("#defaultErrors").modal();
    }
}

In this case, the form submits even though the input "name" is empty. How can I make the form validate the required fields in my JS/Jquery?

Thanks

Upvotes: 1

Views: 20111

Answers (4)

johndivam
johndivam

Reputation: 29

$(document).ready(function() {
$('button[type="submit"]').click(function(event) {
    $('[required]').each(function (i, el) {
        if ($(el).val() == '' || $(el).val() == undefined) {
            alert('Please fill in all mandatory fields!');
            event.preventDefault();
            return false;
        }
    });
});

});

Upvotes: 1

user5929598
user5929598

Reputation:

Why don't you use HTML5 validation? If you only want to assure the input isn't empty. It's the best way to do a basic validation. https://www.w3schools.com/tags/att_input_required.asp

<form id="testForm" name="testForm" action="./test2.html" method="post" onsubmit="jsSubmit()">
  <input type="text" Name="name" required>
  <input type="text" Name="name2">

  <input class="btn btn-primary" type="submit" value="Submit" ID="SubmitButton1">
</form>

By the way, you should use the onsubmit attr on the form to call a javascript function. Because the onclick method on the button is going to call the function even if the form is not validate. Then you would have to validate it in javascript, which is the proper way if you want a complex validation.

Upvotes: 0

Leo Van Deuren
Leo Van Deuren

Reputation: 435

You want to attach your validation function to the onsubmit in the form and make your validation function return true/false. If it returns true the form will submit and it will not if it returns false.

Html:

<form id="testForm" NAME="testForm" ACTION="./test2.html" METHOD="post" onsubmit="return Validation()">
    <INPUT TYPE="text" Name="name" required="yes" />
    <INPUT TYPE="text" Name="name2"  />

    <INPUT class="btn btn-primary" TYPE="submit" ID="SubmitButton1">
</form>

Validation function:

Validation() {
    ...
    return value; // value is true or false based on validation parameters
};

Hope it Helps. Cheers!

Upvotes: 1

S. Walker
S. Walker

Reputation: 2162

I may be going about this the wrong way due to limited information, but could you do something like this:

Use jQuery.submit so that any time the user submits the form your function is called.

Then you can either prevent the submit, or let it continue based on your custom validation. This will allow you to leverage the default browser validation methods.

jQuery("#testForm").submit(function (evt) {

  //At this point the browser will have performed default validation methods.
  
  //If you want to perform custom validation do it here.
  if (jQuery("input[Name='name']").val().length < 4) {
    alert("first Input must have 4 characters according to my custom validation!");
    evt.preventDefault();
    return;
  }
  alert("Values are correct!");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm" NAME="testForm" ACTION="./test2.html" METHOD="post">
    <INPUT TYPE="text" Name="name" required="yes" minlength="3"/>
    <INPUT TYPE="text" Name="name2"  />

    <!-- Change type to submit -->
    <INPUT class="btn btn-primary" TYPE="submit" VALUE="Submit" ID="SubmitButton1"/>
</form>

Upvotes: 3

Related Questions