How to validate already created form using jquery , bootstrap - asp.net-mvc

Question

I have login form with two field User Name and password.These fields are validated .But Now I want to change it in Registration Form by adding more fields like password and confirm password and email now how can i make sure that password entered is matched with confirm password field and similarly how to validate email field.
Login form
<!-- Modal content-->
<div class="modal-content">
<section id="content1">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1 class="modal-title">Signin Form</h1>
</div>
<div class="modal-body">
<input type="text" placeholder="Username" required="" id="username" />
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div class="modal-footer" style="padding-left:86px">
<input type="submit" value="Log in" style="background-color:whitesmoke" />
</div>
</form>
<!-- form -->
</section>
<!-- content -->
<!-- container -->
//</div>
and i added these three files.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Answer 1

For email validation, we can use regex expression:
function isValidEmailAddress(emailAddress) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")#(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(emailAddress);
};
This will true or false on valid email address
For password validation:
function ValidatePassword(){
var password = $("#password").val();
var confirmPassword = $("#confirm-password").val();
if (password != confirmPassword ) {
return false;
} else {
return true;
}
}

Answer 2

You have to create new fields for confirm password and email address.
<input type="password" required="" id="confirmPassword" />
<span id='message'></span>
<input type="email" required="" id="emailAddress" />
<input type="submit" value="Log in" id="submitButtonId" style="background-color:whitesmoke" />
If you are using HTML5, you can use the input type = "email" otherwise use this
pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
Then in Javascript you can validate the value of Password and confirm password field as:
var password = $("#password").val();
var confirmPassword = $("#confirmPassword").val();
if (password != confirmPassword ) {
$('#message').html('Matching');
$('#submitButtonId').prop('disabled', false);
} else {
$('#message').html('Not Matching');
$('#submitButtonId').prop('disabled', true);
}
If, you want to do it before submitting, you can use the following code:
$('#password, #confirmPassword').on('keyup', function () {
if ($('#password').val() == $('#confirmPassword').val()) {
$('#message').html('Matching').css('color', 'green');
$('#submitButtonId').prop('disabled', false);
} else{
$('#message').html('Not Matching').css('color', 'red');
$('#submitButtonId').prop('disabled', true);
}
});

Answer 3

Since JQuery is already a requirement of Bootstrap you could use the following validation plugin to validate the password fields: https://github.com/1000hz/bootstrap-validator/
You could use a code like this to validate the passwords
<!-- New password row -->
<div class="form-inline row">
<!-- 50% -->
<div class="form-group col-sm-6">
<!-- First password input field with custom minlength attribute -->
<input type="password" data-minlength="6" class="form-control" id="password" placeholder="Password"
required>
<!-- Block with requirement -->
<div class="help-block">Minimum of 6 characters</div>
</div>
<!-- 50% -->
<div class="form-group col-sm-6">
<!-- Input field with custom error message when passwords don't match -->
<input type="password" class="form-control" id="passwordConfirm" data-match="#password"
data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<!-- Block to show error message -->
<div class="help-block with-errors"></div>
</div>
</div>
You will need to add an ID attribute to the form and activate the validator plugin.
$('#myForm').validator();
Keep in mind that you never need to rely on JavaScript only and it's always a must to validate the password server-side.