PLEASE REWRITE THE CORRECT CODE AS ITS NOT WORKING,,,, MAY BE SOME TROUBLE WITH MY JS FILE.... I DON'T KNOW BUT ITS IMPORTANT.... I WROTE ALL THE RULES IN JS AND ITS NOT WORKING.... PLEASE CHECK THE CODE AND SOLVE IT.... THANK YOU

index.html

Registration

First Name

Last Name

Email

Password

formvalidation.js

var minUserLen = 5;

var maxUserLen = 30;

var minPassLen = 6;

var maxPassLen = 4000;

var firstnameMsg = "Firstname must be between " + minUserLen + " and " +

maxUserLen + " characters, inclusive.";

var passwordMsg = "Password must be between " + minPassLen + " and " +

maxPassLen + " characters, inclusive.";

jQuery.validator.setDefaults({

debug: true,

success: "valid",

submitHandler: function(form) {

form.submit();

}

});

$(document).ready(function() {

$("#Registration").validate({

rules: {

firstname: {

required: true

minlength: minUserLen,

maxlength: maxUserLen

},

lastname: {

required: true

},

email: {

required: true,

},

password: {

required: true,

minlength: minPassLen,

maxlength: maxPassLen

},

}

messages: {

firstname: {

required: "Please enter your firstname",

minlength: firstnameMsg,

maxlength: firstnameMsg

},

lastname: {

required: "Please enter your lastname",

},

password: {

required: "Please provide a password",

minlength: passwordMsg,

maxlength: passwordMsg

},

email: {

required: "Please enter a valid email address"

},

}

});

});

style.css

html{ margin: 0; padding: 0; }

body { font-family: "Open Sans"; font-size: 14px; } div { width: 400px; border: 5px solid black; padding: 10px; margin: 55px; align: center; } form { padding: 20px 40px; color: #333333; } form label, form input, form button { border: 20px 20px 20px 20px; margin-bottom: 3px; display: block; width: 50%; } form input { border: 1px solid blue; border margin: 100px 100px 100px 100px; height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer; } form .error { color: #ff0000; }

$formBg: #2c3e50; $formColor: #fff; $inputBg: #fff; $inputColor: #000; $buttonBg: #e67e22; $buttonColor: #fff; $errorMsgColor: #ff0000;