I would appreciate all the help I could get!
I'm validating a form client-side using Happy.js
The first input that I want validated is a radiobutton with yes/no. The ID of this input is tied to a javascript function hide/show two divs, therefore I can't change the id to be the same for happy.js:
<input id="id_radio1" type="radio" name="name_radio1" value="Yes" aria-required="true" required/><label for ="id_radio1">Yes</label>
<input id="id_radio2" type="radio" name="name_radio2" value="No" aria-required="true" required//><label for ="id_radio2">No</label>
My happy.js script is as follows, The first field #id_radio1 is the code in question:
<script>
$(document).ready(function () {
$('#awesomeForm').isHappy({
fields: {
// reference the field you're talking about, probably by `id`
// but you could certainly do $('[name=name]') as well.
'#id_radio1': {
required: true,
message: 'Please specify Gas Spring Type'
},
'#qnty': {
required: true,
message: 'Please specify # of Units'
},
'#street': {
required: true,
message: 'Please enter your Street',
},
'#city': {
required: true,
message: 'Please enter your City',
},
'#state': {
required: true,
message: 'Please enter your State/Province',
},
'#country': {
required: true,
message: 'Please enter your Country',
},
'#zip': {
required: true,
message: 'Please enter your Zip/Postal Code',
},
'#email': {
required: true,
message: 'Please enter a valid Email Address',
test: happy.email // this can be *any* function that returns true or false
},
}
});
});
</script>
Thank you for your help.
For your reference, this is the script for DIV switch:
<script language="javascript">
$(document).ready(function () {
$('#div1,#div2').hide();
$('#id_radio1').click(function () {
$('#div2').hide('fast');
$('#div1').show('fast');
});
$('#id_radio2').click(function () {
$('#div1').hide('fast');
$('#div2').show('fast');
});
});</script>
You will need to add a custom function to validate the radio buttons and reference them using the input name. Something like this should work:
$('#awesomeForm').isHappy({
fields: {
'input[name=name_radio1]':{
required: 'sometimes',
message: 'Please select a value',
test: function(){
return $('input[name=name_radio1]').is(':checked');
},
}
}
});
The name should be the same for both radio buttons, ID can never be the same.