form validation cannot read property style of null - javascript

I have a form with validation but the date validation message is not showing and in the console it reads..property style of null and highlights this code "error_box.style.display = 'block';" within the context of this function.
function displayError(fieldname, message){
var input_field = document.querySelector('#'+fieldname);
var error_box = document.querySelector('#'+fieldname+'Message');
addClass(input_field, 'error');
removeClass(input_field, 'correct');
error_box.style.display = 'block';
}
I have the full code in a fiddle:
http://jsfiddle.net/tUa5e/
HTML
<form action="#">
<div class="formColumn1">
<label for="pickup"><span class="textStyle">Pick-up</span>
<input type="date" id="pickup"></label><br>
<label for="dropoff"><span class="textStyle">Drop-off</span>
<input type="date" id="dropoff"><br>
<span id="dropoff" class="message">That date is invalid</span></label>
<div id="pickuperror"></div>
</div>
<!--COLUMN ONE END -->
</div>
<!--COLUMN TWO -->
<div class="formColumn2">
<label for="name"><span class="textStyle">Full Name*</span>
<input type="text" id="name"><br>
<span id="nameMessage" class="message">You must have a valid name</span>
</label>
<label for="email"><span class="textStyle">Email*</span>
<input type="text" id="email"><br>
<span id="emailMessage" class="message">You must have a valid email</span>
</label>
<label for="phoneNumber"><span class="textStyle">Phone Number*</span>
<input type="text" id="phoneNumber"><br>
<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
</label>
<label for="postalAddress"><span class="textStyle">Postal Address</span>
<input type="text" id="postalAddress"><br>
</label>
<label for="city"><span class="textStyle">City</span>
<input type="text" id="city"><br>
</label>
<span class="textStyle">Addtional Information</span>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<input type="submit" id="submit" value="Submit"/>
<!--COLUMN TWO END-->
</div>
</form>
<!--END OF FORM-->
</div>

Related

Toggle Button doesn't seem to be working?

Hi I'm sure I've written this code properly as I followed in the tutorial. I want the #booking-button to be clicked which should 'toggle' the #btn element to disappear. Essentially one is a box which contains information about a car and when user clicks 'Click here to Book' it should open the form. But for some reason it doesn't. I'm thinking it may have something to do with the CSS but I'm not sure.
Any tips on this?
<div class="form-wrapper">
<form action="#">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div class="car-info" id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
</div>
$(document).ready(function() {
$('#booking-button').on('click', () =>
{ $('#btn').toggle(); });
});
Now the form appears when user clicks Click Here to Book, while this button disappears.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
<form action="#" id="car-info" style="display: none;">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
<script>
$(document).ready(function() {
$('#booking-button').on('click', () => {
$('#car-info').toggle();
$('#btn').toggle();
});
});
</script>

Display two fields as mandatory based on selected radio button

I have this radio button in HTML.
<div class="radio">
<label>
<input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
${CVendor}
</label>
</div>
Once this option checked, the two fields below should be displayed and are mandatory. How can I achieve this in HTML?
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>
Try this ng-if="c.data.cvendor==='cvendor'".
Radio button sets c.data.cvendor to 'cvendor'. Thus you can control the display of two input fields via ng-if
As for the fields to be mandatory, you can try ng-required="true".
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
</div>
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
</div>
Try This code
var checkBox;
function DemoFunctin() {
checkBox = document.querySelector('input[type="checkbox"]');
var textInput1 = document.querySelector('input[name="first"]');
var textInput2 = document.querySelector('input[name="second"]');
if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) {
textInput1.setAttribute('required','required');
textInput2.setAttribute('required','required');
}
else {
textInput1.removeAttribute('required');
textInput2.removeAttribute('required');
}
}
if(checkBox){
checkBox.addEventListener('change',toggleRequired,false);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3>
<form>
<p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p>
<input type="text" name="first"/>
<input type="text" name="second"/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
You can achieve this by using ng-required. Based on 'c.data.fieldb' value it will become mandatory or non-mandatory. Similarly, for hide and show you can use ng-show / ng-hide.
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</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>

Form is not submitting due to JavaScript validation

I have created a HTML form, but my form entries are not submitting due to my JavaScript form validation. Here is my HTML and JavaScript:
jQuery("#template-jobform").validate({
submitHandler: function(form) {
jQuery('.form-process').fadeIn();
jQuery(form).ajaxSubmit({
success: function() {
/*jQuery('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));*/
//target: '#job-form-result',
if (data.indexOf("ocation:") > 0) {
window.location = data.replace("Location:", "");
} else {
$('#job-form-result').html(data)
$('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="include/jobs.php" id="template-jobform" name="template-jobform" method="post" role="form">
<div class="form-process"></div>
<div class="col_half">
<label for="template-jobform-fname">First Name <small>*</small>
</label>
<input type="text" id="template-jobform-fname" name="template-jobform-fname" value="" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-lname">Last Name <small>*</small>
</label>
<input type="text" id="template-jobform-lname" name="template-jobform-lname" value="" class="sm-form-control required" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-jobform-email">Email <small>*</small>
</label>
<input type="email" id="template-jobform-email" name="template-jobform-email" value="" class="required email sm-form-control" />
</div>
<div class="col_half">
<label for="template-jobform-age">Age <small>*</small>
</label>
<input type="text" name="template-jobform-age" id="template-jobform-age" value="" size="22" tabindex="4" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-city">City <small>*</small>
</label>
<input type="text" name="template-jobform-city" id="template-jobform-city" value="" size="22" tabindex="5" class="sm-form-control required" />
</div>
<div class="col_full">
<label for="template-jobform-application">Application <small>*</small>
</label>
<textarea name="template-jobform-application" id="template-jobform-application" rows="6" tabindex="11" class="sm-form-control required"></textarea>
</div>
<div class="col_full">
<button class="button button-3d button-large btn-block nomargin" name="template-jobform-apply" type="submit" value="apply">Send Application</button>
</div>
</form>
The page loads indefinitely after clicking on the "send application" button due to this script.

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

Categories