We Keep Coding

On checkbox checked, make another checkbox required [duplicate]

This question already has answers here:
Make input section required when both checkboxes are selected
(5 answers)
Closed 3 years ago.
So I haven't been successful with getting this to work properly, but I have gotten the show/hide portion to work on my form.
Here is what I'm trying to achieve:
- When the My transaction data or Information about my device... is checked, make the last checkbox required.
- When BOTH top checkboxes are checked, make the last checkbox required.
Here is my attempt, but it doesn't work:
$(document).ready(function() {
$('#rtd3Transaction').change(function() {
if ($('#rtdConfirm').attr('required')) {
$('#rtdConfirm').removeAttr('required');
}
else {
$('#rtdConfirm').attr('required','required');
}
});
$('#rtd3Device').change(function() {
if ($('#rtdConfirm').attr('required')) {
$('#rtdConfirm').removeAttr('required');
}
else {
$('#rtdConfirm').attr('required','required');
}
});
$('#rtd3Transaction, #rtd3Device').change(function() {
if ($('#rtd3Transaction').checked && $('#rtd3Transaction').checked) {
$('#rtdConfirm').attr('required','required');
}
else {
$('#rtdConfirm').removeAttr('required');
}
}); });
Code:
<div id='form-wrapper-certain'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<i>You must specify the personal information you would like us to delete:</i>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][checked][]" value="transaction">
<label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][checked][]" value="device">
<label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
</div>
</div>
</div>
<div id='form-wrapper-certain-selection'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Confirm" name="rtd[3][confirm]" value="yes">
<label class="custom-control-label" for="rtd3Confirm">I confirm that I would like not to sell your personal information to third parties.</label>
</div>
</div>
</div>
</div>
</div>

On click event of #rtd3Transaction, #rtd3Device check is if one or both check box is checked than add required. if required is already added than avoid to add it.and if both check box is not checked than remove checked from third one.
check required already added using !$('#rtd3Confirm').prop('required')
$(document).ready(function() {
$('#rtd3Transaction, #rtd3Device').click(function() {
if ($('#rtd3Transaction').prop('checked')==true || $('#rtd3Device').prop('checked')==true) {
if(!$('#rtd3Confirm').prop('required')){
$('#rtd3Confirm').attr('required','required');
}
}else if($('#rtd3Transaction').prop('checked') != true && $('#rtd3Transaction').prop('checked')!=true) {
$('#rtd3Confirm').removeAttr('required');
}
}); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form-wrapper-certain'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<i>You must specify the personal information you would like us to delete:</i>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][checked][]" value="transaction">
<label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][checked][]" value="device">
<label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
</div>
</div>
</div>
<div id='form-wrapper-certain-selection'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Confirm" name="rtd[3][confirm]" value="yes">
<label class="custom-control-label" for="rtd3Confirm">I confirm that I would like not to sell your personal information to third parties.</label>
</div>
</div>
</div>
</div>
</div>

You are over thinking (and over coding). You do not need to check if both checkboxes are checked if checking either one is enough. So remove the first two change() methods and modify the last one to check the statuses of 2 checkboxes and decide the requirement.
$('#rtd3Transaction, #rtd3Device').on('change', function() {
if ($('#rtd3Transaction').prop('checked') == true ||
$('#rtd3Device').prop('checked') == true)
{
$('#rtdConfirm').attr('required','required');
}
else {
$('#rtdConfirm').removeAttr('required');
}
});
Note we use .prop('checked') to see if a checkbox is checked or not.

Why not use the || operator instead of &&? This would require the last checkbox if either of the first two (or both) are checked:
$('#rtd3Transaction, #rtd3Device').change(function() {
if ($('#rtd3Transaction').checked || $('#rtdDevice').checked) {
$('#rtdConfirm').attr('required','required');
} else {
$('#rtdConfirm').removeAttr('required');
}
}
And frankly, jQuery might be a bit overkill here (unless you are already using it for other things), so here's a plain modern JS solution:
let rtd3Transaction = document.getElementById("rtd3Transaction");
let rtd3Device = document.getElementById("rtd3Device");
[rtd3Transaction, rtdDevice].forEach(element=>{
element.addEventListener("click", (event)=>{
let rtdConfirm = document.getElementById("rtdConfirm");
if (rtd3Transaction.checked || rtdDevice.checked) {
rtdConfirm.required = "required";
} else {
rtdConfirm.removeAttribute('required');
}
});
});

Select2 function is not working in angular js dynamic form

hi every one I am working on angular js project. But here is a little problem i am using dynamic form for multiple fields and using select2 function for search but first time it is working then after making new field it is not working for search can you please help me??
here is my controller code for making dynamic field
$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
};
here is code of view
<div data-ng-repeat="choice in choices">
<div class="row">
<div class="col-md-3">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> خریدار کھاتہ</label>
<select ng-model="choice.purchaser_account" name="account{{choice.id}}" class="form-control select2" required>
<option ng-repeat="x in purchaserAccount" value="{{x.id}}">{{x.name}}</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable" > وزن</label>
<input type="text" id="weight" ng-model="choice.weight" class="form-control" required="required">
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> ریٹ</label>
<input type="text" id="price" ng-model="choice.price" class="form-control" required="required">
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> ٹوٹل</label>
<div>{{((choice.price*(choice.weight/40))+((choice.price*(choice.weight/40))*.016)).toFixed(2)}}
</div>
</div>
</div>
<div class="col-md-1">
<div class="form-group label-floating">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</div>
</div>
</div>
</div>
<button class="btn btn-info" ng-click="addNewChoice()">Add fields</button>
can you please help me to solve out this problem

Initialize select on your angular add function.
$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
$(".select2").select2();
};
same initialize it where your are add first option in choice array.

show/hide dynamic error messages and prevent default

I've got a simple form to validate and I can't use jQuery validate().
I've made two error messages - one for a checkbox group and one for an email confirmation mismatch.
Here is the form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>testForm</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container main">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 logo">
<p class="text-center">Use this form to request more information.</p>
<div class="well">
<form name="enrol" id="enrol" xmp-register class="form-horizontal">
<div class="form-group" id="checkboxGroup">
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="flexi" name="checkBoxes"> Yes, email me more information about Scheme 1</label>
</div>
</div>
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="kiwi" name="checkBoxes"> Yes, email me more information about Scheme 2</label>
</div>
</div>
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="protect" checkBoxes="protect"> Yes, email me more information about Scheme 3</label>
</div>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-md-3 col-lg-4 control-label"> First name </label>
<div class="col-md-8 col-lg-7">
<input type="text" name="firstName" maxlength="42" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-md-3 col-lg-4 control-label"> Last name </label>
<div class="col-md-8 col-lg-7">
<input type="text" name="lastName" maxlength="42" class="form-control" required>
</div>
</div>
<div id="emailGroup">
<div class="form-group">
<label for="email" class="col-md-3 col-lg-4 control-label"> Email address </label>
<div class="col-md-8 col-lg-7">
<input type="email" id="email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="confirmEmail" class="col-md-3 col-lg-4 control-label"> Confirm email address </label>
<div class="col-md-8 col-lg-7">
<input type="email" id="confirmEmail" name="confirmEmail" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-number" class="col-md-3 col-lg-4 control-label"> Contact number </label>
<div class="col-md-4">
<input type="text" name="contactNumber" class="form-control" pattern="\d+">
</div>
<div class="col-md-4 col-lg-3">
<select name="contactNumberType" class="form-control">
<option value="" disabled="disabled" selected="selected">Type</option>
<option value="mobile">Mobile</option>
<option value="business-hours">Business Hours</option>
<option value="after-hours">After Hours</option>
</select>
</div>
</div>
<div class="form-group">
<label for="memberNumber" class="col-md-3 col-lg-4 control-label" style="padding-top:0px;"> Member number
<br>(if you already have one)</label>
<div class="col-md-8 col-lg-7">
<input type="number" name="memberNumber" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-1">
<input id="submitBtn" name="submitBtn" type="submit" value="Complete" class="form-control btn btn-primary">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--[if lte IE 7]>
<script src="https://raw.github.com/mattpowell/localstorageshim/master/localstorageshim.min.js" type="text/javascript"></script>
<![endif]-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- WM coding -->
<script src="so.js"></script>
</body>
</html>
and here is the JS
$(document).ready(function () {
// set flags to control error messages
var emailError = false;
var selectionError=false;
$("#submitBtn").click({
// validation checks performed on submit:
// 1. check that at least one checkbox is checked
emailError,selectionError // passing parameters to click function
}, function (event) {
var flexibox = document.getElementById("flexi");
var kiwibox = document.getElementById("kiwi");
var protectbox = document.getElementById("protect");
var mainEmail = document.getElementById("email").value;
var confirmEmail = document.getElementById("confirmEmail").value;
var noSelection = checkRequest(); // check if selection made
var emailMismatch = checkEmails(mainEmail, confirmEmail);
console.log(noSelection);
if (noSelection || emailMismatch) { // checks the first element of variable returned
event.preventDefault();
}
function checkRequest() {
if (protectbox.checked == false && (kiwibox.checked == false && flexibox.checked == false)) { //no option selected
if (selectionError === false) { // if no error message showing
$("#checkboxGroup").after( // add error message
'<div id="noSelect" class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8"><p style="color:red;">Please select at least one option.</p></div>'
);
selectionError = true; //update flag to avoid multiple error messages on repeated submit attempts
}
return selectionError; // exit
} else { // something is selected
$("#noSelect").remove(); // remove error message
selectionError=false; //reset flag
return selectionError; //exit
}
}
function checkEmails(mainEmail, confirmEmail) {
if (mainEmail != confirmEmail) { //2. email addresses don't match
if (emailError === false) { // if no error message showing
$("#emailGroup").after( // add error message
'<div id="emailMismatch" class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8"><p style=color:red;">Please ensure the email addresses match.</p></div>'
);
emailError = true; //update flag to avoid multiple error messages on repeated submit attempts
}
return true;
} else if (mainEmail == "" || confirmEmail == "") { // to stop email error message showing when the fields haven't been filled
return emailError;
} else {
return emailError;
}
}
});
});
// force Sarari to honour required attributes
jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.7/minified/polyfiller.js')     .done(function () {         
webshims.polyfill('forms');          
});
The problem I'm having is that the checkbox group error message hides and shows each time a submit attempt is made - works OK, but the email mismatch error shows once and then can't be removed and the form won't submit, even when an email mismatch has been corrected.
When I inspect the page in Chrome and step through the code, I can see that the two variables for the email check, "mainEmail" and "confirmEmail" do match, but the following statements are skipped as if they do not match.
If anyone could give me some help with this I'd be really grateful. I'm sure that the code is unnecessarily lengthy - I'm pretty much a beginner.
Thanks and regards,
Malcolm

You're not unsetting the error message nor setting emailError to false . Change the else block of checkEmail to
else {
emailError = false;
$("emailMismatch").remove();
return emailError;
}

Show hide text areas using radio buttons

I'm trying to change what text areas are visible depending on what radio button is checked.
I have followed various guides on google and none have worked.
This is what I currently have, using the click function but still nothing.
HTML:
<div class="row col-md-12">
<!-- Header Delimitation input settings -->
<div class="form-group col-md-4">
<label class="control-label" for="header_delimitation">Header delimitation</label>
<div class="col-md-12">
<div class="radio">
<label for="header_delimitation-0">
<input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
</div>
<div class="radio">
<label for="header_delimitation-1">
<input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
Character delimiter
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_col_form">
<label class="control-label" for="header_columns_num">Number of Columns</label>
<div class="">
<input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_delim_form">
<label class=" control-label" for="header_delim">Header delimiter</label>
<div class="">
<input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('#header_col_form').hide('fast');
$('#header_delim_form').hide('fast');
$('#header_delimitation-0').click(function () {
$('#header_col_form').show('fast');
$('#header_delim_form').hide('fast');
});
$('#header_delimitation-1').click(function () {
$('#header_delim_form').show('fast');
$('#header_col_form').hide('fast');
});
});
How it looks like now
So functionality wise, it should when header_delimitation_0 is selected, show header_col_form and hide header_delim_form. I will then add the reverse for when header_delimitation_1 is selected.
There is most likely a far simpler and cleaner way of completing this task, if so, any help would be greatly appreciated.

Form validation with multiple highlighted fields

I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!

You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})

Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.

The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.