CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 1466

JQuery Form Validation not working properly need fixes?

i'm working with the forms and i want when i hit the submit buttom only that field gets red which are empty . don't knw how to fix it . if anyone can help me i'm new javascript and jquery thanks

My HTML

<form id="form">
                  <div class="form-group">
                    <label>Username</label>
                    <p><span id="usernameError"></span></p>
                    <input type="text" class="form-control" id="username" placeholder="Username">
                  </div>
                  <div class="form-group">
                    <label>Email</label>
                    <p><span id="emailError"></span></p>
                    <input type="email" class="form-control" id="email" placeholder="email">
                  </div>
                  <div class="form-group">
                    <label>Password</label>
                    <p><span id="passwordError"></span></p>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label>Confirm Password</label>
                    <p><span id="confPasswordError"></span></p>
                    <input type="password" class="form-control" id="confPassword" placeholder="Confirm Password">
                  </div>
                  <p><span id="warning"></span></p>
                  <button type="submit" id="submit" class="btn btn-default">Submit</button>
                </form>

MY JAVASRIPT

now here is the situation . i put all the variables in one if statement and that's why they all are turning into red 

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

    if(password.val() != confPassword.val() )
    {
        alert("password dont match");
    }

    if($(this).val() == ""){

        username.addClass("border");
        email.addClass("border");
        password.addClass("border");
        confPassword.addClass("border");

        // warning message
        message.text("PLEASE FILL OUT ALL THE FIELDS").addClass("boldred");

        // errors rendering 
        usernameError.text("username must be defined").addClass("red");
        emailError.text("email must be valid and defined").addClass("red");
        passwordError.text("password must be defined").addClass("red");
        confPasswordError.text("confirm password must be matched and defined").addClass("red");

        // disabling submit button 

        submit.attr("disabled" , "disabled");

        return false;

    }

    else{
        return true;
    }

});

Upvotes: 0

Views: 36

Answers (3)

Arun Kumar
Arun Kumar

Reputation: 1667

Try JQuery Validation Engine. Its very easy to implement your form. Validation Engine

Supported for all browsers

Upvotes: 1

Kalle Volkov
Kalle Volkov

Reputation: 458

You are approaching the problem in incorrect way.

On Form submit you need to check each field you want separately.

For example:

$("#form").on('submit', function() {
    var submit = true;
    $(this).find('span').removeClass('red');
    $(this).find('input').each(function() {
        if ($.trim($(this).val()) === '') {
            submit = false;
            $(this).parents('.form-group').find('span').addClass('red');
        }
    });
    return submit;
});

Upvotes: 0

kittenchief
kittenchief

Reputation: 1255

First try adding required to all the necessary fields, like:

<input type="text" class="form-control" id="username" placeholder="Username" required>

Then disable (or delete) the if clause. If that doesn't work, just let me know in the comments and I'll update the answer.

Upvotes: 0

Related Questions