jquery - javascript: prevent submit if all text fields are empty? - Stack Overflow

admin管理员组

文章数量:1290942

i am using this javascript to disable my form submit button until a user has typed in the textarea field. once the textarea is populated the submit button is no longer disabled.

however, whilst this is working for a single text area i now want to find a way to make this work so that if i had four text input fields then to keep the submit button disabled until all of them are NOT empty/populated with text.

heres what im using at the moment:

<form action=\"includes/welestats.php\" method=\"post\" id=\"form1\" onSubmit=\"if (this.display_name.value == '') {return false;}\">
<input type=\"text\" name=\"display_name\" id=\"display_name\" maxlength=\"30\" placeholder=\"Display Name\">
<input type=\"submit\" class=\"wele-submit2\" name=\"submit\" value=\"Next ->\" id=\"submit\"/>
</form>

    <script>
    $(function(){

        $("#submit").submit(function(e){

          if($("#display_name").val()==""))
          {      
            e.preventDefault();
           }
        });        

    });
    </script>

but now i am adding more text input fields to my form, so i need the script to keep my submit button disabled until all the text fields are populated, can anyone help me please?

i want to add these text fields to my form:

<input type=\"text\" name=\"public_email\" id=\"public_email\" maxlength=\"50\" placeholder=\"Email Address\">

<input type=\"text\" name=\"phone\" id=\"phone\" maxlength=\"30\" placeholder=\"Phone Number\">

<input type=\"text\" name=\"age\" id=\"age\" maxlength=\"2\" placeholder=\"Display Age\">

i am using this javascript to disable my form submit button until a user has typed in the textarea field. once the textarea is populated the submit button is no longer disabled.

however, whilst this is working for a single text area i now want to find a way to make this work so that if i had four text input fields then to keep the submit button disabled until all of them are NOT empty/populated with text.

heres what im using at the moment:

<form action=\"includes/welestats.php\" method=\"post\" id=\"form1\" onSubmit=\"if (this.display_name.value == '') {return false;}\">
<input type=\"text\" name=\"display_name\" id=\"display_name\" maxlength=\"30\" placeholder=\"Display Name\">
<input type=\"submit\" class=\"wele-submit2\" name=\"submit\" value=\"Next ->\" id=\"submit\"/>
</form>

    <script>
    $(function(){

        $("#submit").submit(function(e){

          if($("#display_name").val()==""))
          {      
            e.preventDefault();
           }
        });        

    });
    </script>

but now i am adding more text input fields to my form, so i need the script to keep my submit button disabled until all the text fields are populated, can anyone help me please?

i want to add these text fields to my form:

<input type=\"text\" name=\"public_email\" id=\"public_email\" maxlength=\"50\" placeholder=\"Email Address\">

<input type=\"text\" name=\"phone\" id=\"phone\" maxlength=\"30\" placeholder=\"Phone Number\">

<input type=\"text\" name=\"age\" id=\"age\" maxlength=\"2\" placeholder=\"Display Age\">

• javascript
• jquery
• jqueryform

Share Improve this question Follow edited Apr 30, 2013 at 11:34 Terry Young 3,53111 gold badge2222 silver badges2121 bronze badges asked Apr 30, 2013 at 10:45 Bear JohnBear John 3,34577 gold badges2222 silver badges2222 bronze badges 3

• You seem to be using jQuery might be worth mentioning it and adding it to the tags as well. It given more visibility to the question under number of tags.. – Dev Commented Apr 30, 2013 at 10:50
• if you are dynamically load DOM then you need to use it as $(document).on('submit','#submit',function(e){ – Dipesh Parmar Commented Apr 30, 2013 at 10:51
• Sorry for the accidental retag – Terry Young Commented Apr 30, 2013 at 11:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

You could use .filter method to get all the empty input element, then check the length.

if ($('#form1 input').filter(function(){return $(this).val().length == 0;}).length > 0) {
  e.preventDefault();
}

Try using:

<script>
$(function(){

    $('form input').each(function(){
        if($(this).is(':empty')){
           $('form #submit').preventDefault();
        }
    });    

});
</script>

Use this: http://jsfiddle/qKG5F/641/

<input type="submit" id="register" value="Register" disabled="disabled" />

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow./questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    } else {
        $('#register').removeAttr('disabled'); // updated according to http://stackoverflow./questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    }
});
})()

You'll need the OR operator - ||

So if display_name is empty OR public_email is empty etc...

$(function(){

    $("#submit").submit(function(e){

      if($("#display_name").val()=="" || $("#public_email").val()=="" || $("#phone").val()=="" || $("#age").val()=="")
      {      
        e.preventDefault();
       }
    });        

});

Give all of your text fields you want to include in this validation a class class="required" or something along those lines, then you can do this

var empty = $('.required').filter(function(){ return $(this).val() == "" }).length;
if(empty === 0){
   //Enable your submit button all text fields have a value
}

Try this function:

function checkInputs(form) {
  var inputs, all, 
      status = true;

  if (form && form instanceof jQuery && form.length) {
    inputs = form.find("input[type=text]");

    all = inputs.length;

    while (all--) {
      if (!inputs[all].value) {
        status = false;        

        break;
      }
    }

    return status;
  }
}

And demo here: http://jsbin./afukir/1/edit

EDIT: I've added instanceof to make sure that this function will only proceed if the form is actually a jQuery object.

本文标签： jqueryjavascript prevent submit if all text fields are emptyStack Overflow