CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 1466

Form Fields Validation Through Javascript

I'm making a form and i want when the fields are empty the border of the fields gets red but my code is not working please help ! i'm using bootstrap and jquery framework

MY JQUERY

$('document').ready(function() {

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

        var username = $("#username").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var confPassword = $("#confPassword").val();
        var message = $("#warning");

        if (username == "" && email == "" && password == "" && confPassword == "") {
            return false;
            $("#username").css("border", "1px solid red");
        } else {
            return true;
        }

    });

});

Upvotes: 1

Views: 41

Answers (3)

Pranay Rana
Pranay Rana

Reputation: 176896

Adding to avoe answer try code so you should not have to write line of code for each text box, 

var isvalid = true;
$("#username, #email, #password, #confPassword, #warning").each(
function()
{
  if($(this).val()==="")
  {
    $(this).css("border", "1px solid red");
   isvalid = false;
  }
}
);
return isvalid;

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Use OR || to check if user has entered text.

if (username == "" || email == "" || password == "" || confPassword == "" || password != confPassword) {

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

return after setting the css rule. Once the return statement is executed none of the statement after it in the function is executed because the control flow is returned to the caller by the return call.

$('document').ready(function () {

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

        var username = $("#username").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var confPassword = $("#confPassword").val();
        var message = $("#warning");

        if (username == "" && email == "" && password == "" && confPassword == "") {
            $("#username").css("border", "1px solid red");
            return false;//return after setting the properties
        } else {
            return true;
        }

    });

});

Upvotes: 1

Related Questions