jQuery check inputs not empty before submit

Question

I've been looking at different threads about how to do this and got the following script together, however, even when I type into the inputs so they're not empty, I'm getting the alert pop up and the form doesn't submit.

Can anyone see what I'm doing wrong or if there's a simpler / more efficient way of doing this?

Thanks,

Osu

HTML:

<form action="#" method="post" class="signup-form">
    <div class="required">
        <label for="name">Name:</label>
        <input type="text" name="cm-name" id="name" value=""><br />
    </div>
    <div class="required">
        <label for="asd-asd">Email:</label>
        <input type="text" name="cm-asd" id="asd-asd" value="">
        <span class="btn"><input type="submit" name="submit" value="" id="signup"></span>
    </div>          
</form>

JS:

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

Possible duplicate of http://stackoverflow.com/questions/17865148/using-jquery-to-prevent-form-submission-when-input-fields-are-empty/39609587#39609587 — Elnaz, Sep 21 '16 at 07:08
for similar problems: You can use required attribute in html5. It will handle the validation and required css.. — Elnaz, Sep 21 '16 at 07:09

score 12 · Answer 1 · answered Dec 07 '11 at 17:43

Thanks for the answers, however, I found that the reason I was getting the error message was because the submit button had no value i.e. value="", so it was checking that input too. In order to rectify the problem, I had to make sure the submit function was checking only 'text' input types:

New JS:

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input:text").each(function(){ // Note the :text
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

erimerturk · Answer 2 · 2011-12-06T15:30:10.783

 $('#signup').click(function(event) {

 event.preventDefault(); 
//validate and if it is valid serialize the form
//else alert and return


var isFormValid = true;
    $(".signup-form .required input").each(function(index, value){
        if ($.trim($(value).val()).length == 0){
            $(value).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(value).parent().removeClass("highlight");
        }
    });

if(isFormValid ){
   $.post( 'validation.php', $('.signup-formt').serialize(), function( data ) {

  });
}else{
  alert("Please fill in all the required fields (highlighted in red)");
}
 });

score 1 · Answer 3 · answered Dec 06 '11 at 15:19

1

$('input').each(function(index, obj){
    if($(obj).val().length === 0) {
        $(obj).addClass('error');
    }
});

But I dont remember would it be obj or this.

answered Dec 06 '11 at 15:19

Ernestas Stankevičius

2,420
2
24
30

score 0 · Answer 4 · answered Jun 20 '13 at 16:28

.each runs the script multiple times. for example if you have 3 empty inputs the script you are using adds class .highlight 3 times. if you want to keep your page light and clean give the script below a go.

check = function()
    {                
var empty = $(".signup-form .required input").filter(function() {
return this.value == ""; });//this checks if 1 or more inputs have no value
if(empty.length) {//to be applied if at least 1 input has no value
alert("Please fill in all the required fields (highlighted in red)");
$(".signup-form").addClass("highlight");
}else{
$(".signup-form").removeClass("highlight");
};}

This will alert the message ONCE if at least one input is empty. then simply add the function onclick to your submit input or any button you want to validate the form with.

<input type="submit" value="submit" onclick="check();">

jQuery check inputs not empty before submit

4 Answers4

Linked