We Keep Coding

validate form field on tab change

I have two tabs with different fields. One is sign-up with email,name and password fields the other is for login with username and password field. The form action will point to same servlet page. So how will i validate those two tabs accordingly?
<form name="form" action="RegisterServlet" method="post" onsubmit ="return validate()" >
<div class="login-wrap">
<div class="login-html">
<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab" >Sign In</label>
<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
<div class="login-form">
<div class="sign-in-htm">
<div class="group">
<label for="user1" class="label">Username</label>
<input id="user1" name="username1" type="text" class="input" >
</div>
<div class="group">
<label for="pass1" class="label">Password</label>
<input id="pass1" name="password1" type="password" class="input" data-type="password" >
</div>
<span style="color:red"><%=(request.getAttribute("errMessage") == null) ? ""
: request.getAttribute("errMessage")%></span>
<div class="group">
<input type="submit" name="ACTION" class="button" value="Login" >
</div>
<div class="hr"></div>
<div class="foot-lnk">
Forgot Password?
</div>
</div>
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" name="username" type="text" class="input" >
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" name="password" type="password" class="input" data-type="password" >
</div>
<div class="group">
<label for="email" class="label">Email Address</label>
<input id="email" name="email" type="text" class="input" >
</div>
<div class="group">
<input type="submit" name="ACTION" class="button" value="Register" >
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">Already Member?</a>
</div>
</div>
</div>
</div>

Add onchange handlers for radio buttons and make sure desired
form is visible
Add validate method for form onsubmit handler.
Hope this helps.
function onChangeSignIn() {
var signIn = document.getElementsByClassName("sign-in-htm");
signIn[0].classList.remove("disable");
var signUp = document.getElementsByClassName("sign-up-htm");
signUp[0].classList.add("disable");
}
function onChangeSignUp() {
var signIn = document.getElementsByClassName("sign-in-htm");
signIn[0].classList.add("disable");
var signUp = document.getElementsByClassName("sign-up-htm");
signUp[0].classList.remove("disable");
}
function validate() {
if (document.getElementById("tab-1").checked) {
console.log('on tab-1 - sign-in')
// do validation for tab-1 fields
const user1 = document.getElementById("user1").value;
if (user1 === "") {
console.log("Username is empty in sign-in, please enter");
return false;
}
}
if (document.getElementById("tab-2").checked) {
console.log('on tab-2 - sign-up')
// do validation for tab-2 fields
const user = document.getElementById("user").value;
if (user === "") {
console.log("Username is empty in sign-up, please enter");
return false
}
}
return false; // or true based on validation
}
onChangeSignIn();
.disable {
display: none;
}
<form name="form" action="RegisterServlet" method="post" onsubmit ="return validate()" >
<div class="login-wrap">
<div class="login-html">
<input id="tab-1" type="radio" name="tab" class="sign-in" onchange="onChangeSignIn()" checked><label for="tab-1" class="tab" >Sign In</label>
<input id="tab-2" type="radio" name="tab" class="sign-up" onchange="onChangeSignUp()"><label for="tab-2" class="tab">Sign Up</label>
<div class="login-form">
<div class="sign-in-htm">
<div class="group">
<label for="user1" class="label">Username</label>
<input id="user1" name="username1" type="text" class="input" >
</div>
<div class="group">
<label for="pass1" class="label">Password</label>
<input id="pass1" name="password1" type="password" class="input" data-type="password" >
</div>
<span style="color:red"><%=(request.getAttribute("errMessage") == null) ? ""
: request.getAttribute("errMessage")%></span>
<div class="group">
<input type="submit" name="ACTION" class="button" value="Login" >
</div>
<div class="hr"></div>
<div class="foot-lnk">
Forgot Password?
</div>
</div>
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" name="username" type="text" class="input" >
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" name="password" type="password" class="input" data-type="password" >
</div>
<div class="group">
<label for="email" class="label">Email Address</label>
<input id="email" name="email" type="text" class="input" >
</div>
<div class="group">
<input type="submit" name="ACTION" class="button" value="Register" >
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">Already Member?</a>
</div>
</div>
</div>
</div>

jQuery HTML 5 require field if radio button checked

I have a form that has some radio buttons which I need some fields to be required if a radio button is checked.
I have the HTML5 required attribute on the radio button group which works fine but I want some text fields to be required if the corresponding radio button is checked.
I have written some JS which seems to have no effect, and doesn't seem to add the required attribute when the radio button is checked.
HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.js JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('#stallType-Business').change(function () {
if(this.checked) {
$('#bizName').attr('required');
} else {
$('#bizName').removeAttr('required');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});

You can do it like this, where you disable all inputs and then only activate the one that is selected.
It requires that you have the "disabled" prop added to all child inputs at the start.
I also added the ID's for the c-rail inputs.
Note that the check you do does not trigger when you select another radio button, that is why should disable the others when a new one is selected.
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
It is the disableAll() function that does the trick here.
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bookingForm">
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes
<input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled />
</div>
</div>
</div>
</form>

Take a look at JQuery's .prop() method...
.prop()
...and a look at this example from...
How to require fields if a certain radio button is checked?
<body>
<form action="" method="post">
<label for="required_later">Required if Option2 selected</label>
<input type="text" name="text_input_field" id="required_later" disabled><br>
<input type="radio" id="option1" name="radio_options" value="option1">
<label for="option1">Option1</label><br>
<input type="radio" id="option2" name="radio_options" value="option2">
<label for="option2">Option2</label><br>
<input type="submit" name="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#option1").click(function() {
$("#required_later").prop("required", false);
$("#required_later").prop("disabled", true);
});
$("#option2").click(function() {
$("#required_later").prop("required", true);
$("#required_later").prop("disabled", false);
$("#required_later").focus();
});
</script>
</body>

Another way to do it is using this function:
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
and adding class="input-radio" to those input that you want to do the job.
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" />
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>

jQuery validate not checking email format / not working after Ajax submit

I am having two separate issues with implementing the jQuery validation library:
When I try to submit my form with an invalid email address I am not getting a warning message about format. The form is simply not submitting. If the form is correctly filled in the submission is working. If I just have required fields missing the validation is working. What is going wrong with my email format check?
The form can re-appear on the page using Ajax if the customer wants to edit any details. When this happens the validator is not working at all. How can I address this?
This is my original Javascript (all working perfectly):
var detailsform = ('form[id$="register"]');
$('body').on('submit', detailsform, {}, function(event) {
// Serialize the form data and store the ID of the submitted form
var formData = $(detailsform).serialize();
// Stop the browser from submitting the form.
event.preventDefault();
$.ajax({
type: "POST",
url: $(detailsform).attr('action'),
data: formData
}).done(function(data) {
$('html,body').scrollTop(0);
var details = $(data).find("#details");
$("#details").html(details.html());
var delivery = $(data).find("#delivery");
$("#delivery").html(delivery.html());
$('#delivery').removeClass('inactive');
var carttotals = $(data).find("#carttotals");
$("#carttotals").html(carttotals.html());
var payment = $(data).find("#payment");
$("#payment").html(payment.html());
});
});
This is my updated Javascript (with added validation):
var detailsform = ('body form[id$="register"]');
$(detailsform).validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
}
},
highlight: function(element, errorClass) {
$(element).each(function() {
$(this).closest('div').addClass('error');
});
},
unhighlight: function(element, errorClass) {
$(element).each(function() {
$(this).closest('div').removeClass('error');
});
},
messages: {
name: "Please enter your name",
email: {
required: "We require your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
},
},
submitHandler: function(form) {
event.preventDefault();
var formData = $(detailsform).serialize();
$.ajax({
type: "POST",
url: $(detailsform).attr('action'),
data: formData
}).done(function(data) {
$('html,body').scrollTop(0);
var details = $(data).find("#details");
$("#details").html(details.html());
var delivery = $(data).find("#delivery");
$("#delivery").html(delivery.html());
$('#delivery').removeClass('inactive');
var carttotals = $(data).find("#carttotals");
$("#carttotals").html(carttotals.html());
var payment = $(data).find("#payment");
$("#payment").html(payment.html());
});
}
});
<div class="checkout-section" id="details">
<form id="form3_register" action="/shop/checkout" method="post">
<h2>1. Your Details</h2>
<div class="infieldlabel">
<input id="form3_email" name="email" class="checkout-input" type="email" required="required" />
<label class="infield required" for="form3_email">Your Email for Order Confirmation</label>
<input id="form3_password" name="password" value="__auto__" type="hidden" />
</div>
<div class="row">
<div class="infieldlabel half">
<input id="form3_first_name" name="first_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_first_name">First name</label>
</div>
<div class="infieldlabel half">
<input id="form3_last_name" name="last_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_last_name">Last name</label>
</div>
</div>
<div class="infieldlabel">
<input id="form3_phone" name="phone" class="hascontent" type="text" />
<label class="infield" for="form3_phone">Phone Number</label>
</div>
<div class="checkboxwrapper">
<input id="form3_mailinglist_checkbox" name="mailinglist_checkbox" value="1" type="checkbox" />
<label for="form3_mailinglist_checkbox">Add me to the Newgate Watches mailing list</label>
</div>
<h3>Billing address</h3>
<div class="infieldlabel">
<input id="form3_address_1" name="address_1" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_address_1">Address 1</label>
</div>
<div class="infieldlabel">
<input id="form3_address_2" name="address_2" class="checkout-input" type="text" />
<label class="infield" for="form3_address_2">Address 2</label>
</div>
<div class="row">
<div class="infieldlabel third">
<input id="form3_city" name="city" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_city">Town / City</label>
</div>
<div class="infieldlabel third">
<input id="form3_county" name="county" class="checkout-input" type="text" />
<label class="infield" for="form3_county">County / State</label>
</div>
<div class="infieldlabel third">
<input id="form3_postcode" name="postcode" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_postcode">Postcode / Zip</label>
</div>
</div>
<div class="row">
<h3 class="half">Shipping address</h3>
<div class="checkboxwrapper half">
<input type="checkbox" name="checkbox" id="toshipping_checkbox" />
<label for="toshipping_checkbox">Same as Billing Address</label>
</div>
</div>
<div class="row">
<div class="infieldlabel half">
<input id="form3_shipping_first_name" name="shipping_first_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_first_name">First name</label>
</div>
<div class="infieldlabel half">
<input id="form3_shipping_last_name" name="shipping_last_name" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_last_name">Last name</label>
</div>
</div>
<div class="infieldlabel">
<input id="form3_shipping_address_1" name="shipping_address_1" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_address_1">Address 1</label>
</div>
<div class="infieldlabel">
<input id="form3_shipping_address_2" name="shipping_address_2" class="checkout-input" type="text" />
<label class="infield" for="form3_shipping_address_2">Address 2</label>
</div>
<div class="row">
<div class="infieldlabel third">
<input id="form3_shipping_city" name="shipping_city" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_city">Town / City</label>
</div>
<div class="infieldlabel third">
<input id="form3_shipping_county" name="shipping_county" class="checkout-input" type="text" />
<label class="infield" for="form3_shipping_county">County / State</label>
</div>
<div class="infieldlabel third">
<input id="form3_shipping_postcode" name="shipping_postcode" class="checkout-input" type="text" required="required" />
<label class="infield required" for="form3_shipping_postcode">Postcode / Zip</label>
</div>
</div>
<div>
<input value="Continue to Delivery Options" type="submit" />
<input type="hidden" name="cms-form" value="cmVnaXN0ZXI6cGVyY2hfbWFpbGNoaW1wIHBlcmNoX3Nob3A6L3RlbXBsYXRlcy9zaG9wL2NoZWNrb3V0L2N1c3RvbWVyX2NyZWF0ZV9wYXNzd29yZGxlc3MuaHRtbDoxNDc2ODc0MzY1" />
</div>
</form>
</div>
As always help greatly appreciated!

Access CSS file within a javascript file

I have a User form which contains first name, last name, password and confirm password fields. Now i have added a validation for password and confirm password to check if both are same. I had javascript file as
$(document).ready(function() {
$("#addUser").click(function() {
var password = document.getElementById('password');
var confirmPassword = document.getElementById('confirmPassword');
var message = document.getElementById('confirmMessage');
var matchingColor = "#008000";
var nonMatchingColor = "#ff6666";
if (password.value == confirmPassword.value) {
confirmPassword.style.backgroundColor = matchingColor;
message.style.color = matchingColor;
message.innerHTML = "Passwords Match!"
} else {
confirmPassword.style.backgroundColor = nonMatchingColor;
message.style.color = nonMatchingColor;
message.innerHTML = "Passwords Do Not Match!"
}
})
});
Now i have to eliminate the css properties from the javascript file. I was asked to do something like
$('#classYouWantToChange').addClass('passwordMatch').removeClass('passwordDoNotMatch')
I am not sure how this works. Can anyone help with this. Thanks in advance.
This is the jsp file
<div class="form-horizontal" role="form" id="AddUser">
<form action="adminAddUserForm" method="post">
<fieldset>
<legend>
<fmt:message key="ManageUsers.ADD_USER" />
</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="firstName"><fmt:message
key="addUser.FIRSTNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="firstName" class="form-control"
name="firstName" required aria-required="true" placeholder="Jon"
title=<fmt:message key="addUser.FIRSTNAME_INPUT_MESSAGE" />
maxlength="30" pattern="[a-zA-Z]+" />
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="lastName"><fmt:message
key="addUser.LASTNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="lastName" class="form-control"
name="lastName" required aria-required="true" placeholder="Doe"
title=<fmt:message key="addUser.LASTNAME_LABEL" />
maxlength="30" pattern="[a-zA-Z]+">
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="userName"><fmt:message
key="addUser.USERNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="userName" class="form-control"
name="userName" required aria-required="true" placeholder="John_Doe"
title=<fmt:message key="addUser.USERNAME_INPUT_MESSAGE" />
pattern="^[a-zA-Z0-9]+([_]?[a-zA-Z0-9])*$" >
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="password"><fmt:message
key="addUser.PASSWORD_LABEL" /></label>
<div class="col-sm-2"> <input type="password" name="password" id="password" class="form-control"
title=<fmt:message key="ManageUsers.PASSWORD_VALIDATION" />
required aria-required="true" pattern="(?=.\d)(?=.[A-Z]).{6,}" >
</div>
</div>
<%-- <div id="passwordsMatch" class="passwordsMatch" style="display: none;">
<h5><fmt:message key="ManageUsers.PASSWORDS_MATCH" /> </h5>
</div> --%>
</br>
<div class="form-group">
<label for="confirmPassword" class="control-label col-sm-2"><fmt:message
key="addUser.CONFIRM_PASSWORD_LABEL" /></label>
<div class="col-sm-2"> <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
<span id="confirmMessage" class="confirmMessage"></span>
</div>
</div>
<div id="passwordsDoNotMatch" class="passwordsDoNotMatch" style="display: none;">
<h5><fmt:message key="ManageUsers.PASSWORDS_NO_NOT_MATCH" /> </h5>
</div>
<c:choose>
<c:when test="${empty signFilter }">
<div class="form-group">
<label class="control-label col-sm-2" for="role"><fmt:message
key="addUser.ROLE_LABEL" /></label>
<input type="radio" id="role" name="userRole" value="ROLE_USER"
checked="checked" /> <fmt:message key="addUser.ROLE_USER" />
<input type="radio" id="role" name="userRole" value="ROLE_INSTRUCTOR" />
<fmt:message key="addUser.ROLE_INSTRUCTOR" />
<input type="radio" id="role" name="userRole" value="ROLE_ADMIN" />
<fmt:message key="addUser.ROLE_ADMIN" />
</div>
</c:when>
<c:otherwise>
<input type="hidden" name="userRole" value="ROLE_USER">
</c:otherwise>
</c:choose>
<br />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="addUser">
<input type="submit" class= "btn btn-info" name="submitBtn" value="Add User">
</div>
</div>

You can use the above methods like following:
//On event trigger:
//Do validations
//If passwords match, then do this -
$('#idYouWantToModify').addClass('passwordMatch')
//If passwords do not match, then do this -
$('#idYouWantToModify').addClass('passwordDoNotMatch')
//You can remove the classes later if you have any additional steps that want you to do so, by doing the following:
$('#idYouWantToModify').removeClass('whicheverClassYouWantToRemove')
You can read more about .addClass() and .removeClass()

To make things simpler, you could just use jquery toggle class like so
//If passwords match, then do this -
$('#idYouWantToModify').toggleClass('passwordMatch')
adds class if its not there and removes it if its there
learn more here toggleclass

Form validation is not working properly when clicking submit button?

For the 1st code while clicking submit button without filling any text it is showing as "Please fill out this field".
For the 2nd code it is not showing or submitting code while clicking submit button. I need submit button to show "Please fill out this field" while clicking on it.
<!------------------1st html code------------>
<html>
<body>
<section id="contact-page">
<div class="container">
<div class="center" style="padding-top: 100px; border-bottom-width: 10px;padding-bottom: 50px;">
<h2>Drop Your Message</h2>
<p class="lead"><b><em>Education is the most powerful weapon we can use to change the world</em></b></p>
</div>
<div class="row contact-wrap" style="margin-top:00px;">
<form action="sendemail.php" data-ajax="false" method="post" class="form">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label for="Name">Name *</label>
<input type="text" id="Name" name="name" class="form-control" required="required" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="Email">Email *</label>
<input type="email" id="Email" name="email" class="form-control" required="required" placeholder="Enter email-id">
</div>
<div class="form-group">
<label for="phone">Phone *</label>
<input type="tel" id="phone" name="phone" pattern="^\d{4}\d{3}\d{3}$" class="form-control" required="required" placeholder="Enter number">
</div>
<div class="form-group">
<label for="Subject">Subject *</label>
<input type="text" id="Subject" name="subject" class="form-control" required="required" placeholder="Enter subject">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Message">Message *</label>
<textarea name="message" id="Message" name="Message" required="required" class="form-control" rows="9" placeholder="Enter message"></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
</div>
</div>
</form>
</div>
<!--/.row-->
</div>
<!--/.container-->
</section>
<!--/#contact-page-->
</body>
</html>
<!-----------------------------------1st code completed------------>
<!---------------------2nd html code--------->
<html>
<body>
<div class="row">
<div class="col-sm-8">
<div class="contact-form">
<h2 class="title text-center">Get In Touch</h2>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form row" name="Enquiry-form" method="post" action="sendemail.php" data-ajax="false" style="margin-bottom: 0px;">
<div class="form-group col-md-6" style="padding-left: 30px;">
<input type="text" name="Name" id="Name" class="form-control" placeholder="Name" required="required">
</div>
<div class="form-group col-md-6">
<input type="tel" pattern="^\d{4}\d{3}\d{3}$" id="phone" name="phone" class="form-control" required="required" placeholder="Contact Number" style="width: 387px;">
</div>
<div class="form-group col-md-12">
<form name="myform" action="">
<input type="radio" id="radiobutton1" value="text1" style="margin-left: 15px; margin-right: 5px;" />
<input type="text" id="profession1" enabled="enabled" placeholder="Category of the Business if Self-employ" style="margin-left: 15px; width: 349px;" />
<input type="radio" id="radiobutton2" value="text2" style="margin-left: 30px;margin-right: 5px;" />
<input type="text" id="profession2" disabled="disabled" placeholder="Company name if Employee" style="margin-left: 15px; width: 345px;" />
</form>
</div>
<script>
var radiobutton1 = document.getElementById('radiobutton1');
var radiobutton2 = document.getElementById('radiobutton2');
radiobutton1.onchange = function() {
radiobutton2.checked = !this.checked;
document.getElementById('profession1').disabled = !this.checked;
document.getElementById('profession2').disabled = this.checked;
};
document.getElementById('radiobutton2').onchange = function() {
radiobutton1.checked = !this.checked;
document.getElementById('profession2').disabled = !this.checked;
document.getElementById('profession1').disabled = this.checked;
};
</script>
<div class="form-group col-md-4" style="width: 236px;">
<input type="text" name="productid" id="productid" class="form-control" required="required" placeholder="Product Id" style="width: 236px;">
</div>
<div class="form-group col-md-4" style="width: 269px; padding-left: 45px;">
<input list="Category" id="producttype " name="producttype" class="form-control" required="required" placeholder="Product Type" style="width: 269px;">
<datalist id="Category">
<option value="Consumer Products">
<option value="Cosmetics">
<option value="Food Products">
<option value="Energy Drinks">
</datalist>
</div>
<div class="form-group col-md-4" style="width: 236px; padding-left: 73px;">
<input type="text" name="Productquantity" id="Productquantity" class="form-control" required="required" placeholder="Product Quantity" style="width: 236px;">
</div>
<div class="form-group col-md-6">
<input type="email" name="Email" id="Email" class="form-control" required="required" placeholder="Email">
<br>
<textarea name="Message" id="Message" required="required" class="form-control" rows="5" placeholder="Comment Here" style="height: 114px;"></textarea>
</div>
<div class="form-group col-md-6" style="height: 144px;">
<textarea name="Shippingaddress" id="Shippingaddress" class="form-control" rows="5" placeholder="Shipping Address" required="required" style="height: 179px;"></textarea>
</div>
<div class="form-group col-md-12" style="padding-right: 0px; padding-left: 330px;">
<button type="submit" name="submit" class="btn btn-primary btn-lg" style="padding-left: 25px;" required="required">Submit Message</button>
</div>
</form>
</div>
</div>
</body>
</html>
<!-----------------------------------2nd html code completed----------->

Here in the 2nd example you are using nested form.Try removing the nested form and It will work