JQuery Register Form Validation

Question

I have this Registration Form for a website that contains basically :

• Name
• Lastname
• Date of Birth
• Email
• Username
• Password
• Confirm Password I was able to make a script which validates whether Each case of the Form is filled and for Email if it is a Valid email address or not. Now I'm stuck at how to make the Validation of whether the Full Name (will be made like this: Name+LastName), the Email and the Username exists in the Database or not. I tried with the jquery.validate plugin but i couldn't get to work..

Demo: https://jsfiddle.net/2y1bry24/4/

 /*** Sign Up ***/ $(document).ready(function () { $flag = 1; /***** Personal Data Validation ****/ $("#name").focusout(function () { if ($(this).val() == '') { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_name").text("* You have to enter your first name!"); } else { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_name").text(""); } }); $("#lastname").focusout(function () { if ($(this).val() == '') { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_lastname").text("* You have to enter your last name!"); } else { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_lastname").text(""); } }); $("#dob").focusout(function () { if ($(this).val() == '') { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_dob").text("* You have to enter your Date of Birth!"); } else { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_dob").text(""); } }); /***** Email Validation ****/ function validateEmail(sEmail) { var filter = /^((([az]|\\d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+(\\.([az]|\\d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+)*)|((\\x22)((((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f]|\\x21|[\\x23-\\x5b]|[\\x5d-\\x7e]|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(\\\\([\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f]|[\ -\퟿\豈-\﷏\ﷰ-\￯]))))*(((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(\\x22)))@((([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ-\￯])*([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.)+(([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ-\￯])*([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.?$/; if (filter.test(sEmail)) { return true; } else { return false; } } $("#email").focusout(function () { var sEmail = $('#email').val(); if ($.trim(sEmail).length == 0) { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_email").text("Please enter valid email address"); e.preventDefault(); } if (validateEmail(sEmail)) { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_email").text("");; } else { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_email").text("Invalid email address"); e.preventDefault(); } }); /***** Login Data Validation ****/ $("#username").focusout(function () { if ($(this).val() == '') { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_username").text("* You have to enter your Username!"); } else { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_username").text(""); } }); $("#password").focusout(function () { if ($(this).val() == '') { $(this).css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_password").text("* You have to enter your Password!"); } else { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_password").text(""); } }); $("#confirm").focusout(function () { if ($("#confirm").val() !== $("#password").val()) { $("#confirm").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_confirm").text("Passwords Do not match!"); } else { $(this).css("border-color", "#2eb82e"); $('#submit').attr('disabled', false); $("#error_confirm").text(""); } }); /***+* Submit Validation ****/ $("#submit").click(function () { if ($("#name").val() == '') { $("#name").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_name").text("* You have to enter your first name!"); } if ($("#lastname").val() == '') { $("#lastname").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_lastname").text("* You have to enter your Last name!"); } if ($("#dob").val() == '') { $("#dob").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_dob").text("* You have to enter your Date of Birth!"); } if ($("#email").val() == '') { $("#email").css("border-color", "#FF0000"); $('#submit').attr('disabled', true); $("#error_email").text("* You have to enter your Email !"); } if ($("#username").val() == '') { $("#username").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_username").text("* You have to enter your Username!"); } if ($("#password").val() == '') { $("#password").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_password").text("Enter a Password"); } if ($("#confirm").val() == '') { $("#confirm").css("border-color", "#cd2d00"); $('#submit').attr('disabled', true); $("#error_confirm").text("Confirm Password"); } }); }); 

 /*** Sign-up ***/ #playground-container { height: 500px; overflow: hidden !important; -webkit-overflow-scrolling: touch; } body, html { background-repeat: repeat-y; background: url(https://i.ytimg.com/vi/4kfXjatgeEU/maxresdefault.jpg); font-family: 'Oxygen', sans-serif; background-size: cover; } .main { margin: 50px 15px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr { width: 10%; color: #fff; } .form-group { margin-bottom: 15px; } label { margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login { background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .form-control { height: auto!important; padding: 8px 12px !important; } .input-group { -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21)!important; -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21)!important; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21)!important; } #button { border: 1px solid #ccc; margin-top: 28px; padding: 6px 12px; color: #666; text-shadow: 0 1px #fff; cursor: pointer; -moz-border-radius: 3px 3px; -webkit-border-radius: 3px 3px; border-radius: 3px 3px; -moz-box-shadow: 0 1px #fff inset, 0 1px #ddd; -webkit-box-shadow: 0 1px #fff inset, 0 1px #ddd; box-shadow: 0 1px #fff inset, 0 1px #ddd; background: #f5f5f5; background: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee)); background: -webkit-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: -o-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: -ms-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); } .main-center { margin-top: 30px; margin: 0 auto; max-width: 400px; padding: 10px 40px; background: #588ba7; color: #FFF; text-shadow: none; -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.31); -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.31); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.31); } span.input-group-addon i { color: #009edf; font-size: 17px; } .login-button { margin-top: 5px; } .login-register { font-size: 11px; text-align: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <div class="container"> <div class="row main"> <div class="main-login main-center"> <h5>Registrieren</h5> <form id="register_form" name="register_form" method="post" action="index.php"> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Vorname</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="name" id="name" placeholder="Dein Vorname" data-validation="required" /> </div> </div> <span id="error_name" class="text-danger"></span> </div> <div class="form-group"> <label for="lastname" class="cols-sm-2 control-label">Nachname</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Dein Nachname" data-validation="required" /> </div> </div> <span id="error_lastname" class="text-danger"></span> </div> <div class="form-group"> <label for="dob" class="cols-sm-2 control-label">Geburtstag</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-calendar fa" aria-hidden="true"></i></span> <input type="date" class="form-control" name="dob" id="dob" data-validation="required"> </div> <span id="error_dob" class="text-danger"></span> </div> <div class="form-group"> <label for="email" class="cols-sm-2 control-label">Email</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="email" id="email" placeholder="Dein Email" data-validation="required" /> </div> </div> <span id="error_email" class="text-danger"></span> </div> <div class="form-group"> <label for="username" name="username" class="cols-sm-2 control-label username">Benutzername</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="username" id="username" placeholder="Benutzername" data-validation="required" /> </div> </div> <span id="error_username" class="text-danger"></span> </div> <div class="form-group"> <label for="password" class="cols-sm-2 control-label">Passwort</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" data-validation="required" /> </div> </div> <span id="error_password" class="text-danger"></span> </div> <div class="form-group"> <label for="confirm" class="cols-sm-2 control-label">Bestätigen</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Passwort" data-validation="required" /> </div> </div> <span id="error_confirm" class="text-danger"></span> </div> <div class="form-group "> <input type="submit" value="Submit" id="submit" class="btn btn-secondary center"/> </div> </form> </div> </div> </div> </body> 

Answer 1

For Jquery validation, you need to set data-val=true and data-val-required='Some required error message . Also the jquery unobtrusive plugin makes things work much smoother.

I would recommend looking into as your on code has logic errors. For example, your $("#submit").click should return false if you have validation errors.

As for integrating with the data base, you will need a php handler and you'll use jquery's ajax function $.ajax( to send the fields you want to validate first to the php handler.

You could also submit the form at this point and perform validation on the server side, which you should be doing anyone because anyone can modify your form validation methods, or even have javascript disabled on their browser, and submit invalid data anyway.