SDerailed wrote:
I need a little advice about form validation. I need to validate a drop down select box, a radio button, and a checkbox input button before submit. How can I validate these without a huge loopy mess? Any suggestions?
As long as you realize that client side validation is complementary, not a fail-safe secure option.
Basically you haven't provided any info on how you want to validate.
To select an element by id
Code:
document.getElementById('yourFormID')
You can do
Code:
document.getElementById('yourForm').fieldName.value
By it is also good practice to provide id for you form elements
Code:
document.getElementById('fieldID').value
Are you using jQuery?
Code:
jQuery('form#yourForm #fieldID').val()
I don't know what you mean 'loopy mess' you can just use normal logic like if statements
Create a callback
Code:
function submitCallback(){
// validation logic
if(isValid){
return false;
}else{
return true;
}
}
You need to bind to the submit event. Writing even listener is a bit complex cross browser in hand-rolled javascrict.
The very old fashioned limited way is
Code:
document.getElementById('fieldID').onsubmit = submitCallback;
More modern method is
Code:
var frm = document.getElementById('yourForm');
if(frm.addEventListener){
frm.addEventListener("submit", submitCallback, false); //Modern browsers
}else if(frm.attachEvent){
frm.attachEvent('onsubmit', submitCallback); //Old IE
}
Note this doesn't cover all the event listener quirks of some of the ancient browsers.
In jQuery it is as simple as
Code:
jQuery('form#yourForm #fieldID').submit(submitCallback);
That handles all the event binding quirkiness cross browser.
05 Feb 2015, 2:18 pm
