I have this questionnaire that I use to begin an app. I'm using javascript to validate before I submit it, but I'm running into a problem where it is only validating the second button on each question and not validating each question individually. I have posted code below.
Questionnaire
<?
for($i = 1; $i <= count($questions); $i++){
print "<div class='form-group'>";
print "<div class='col-md-12'>";
print "<p>$i) ".$questions[$i-1]."</p>";
print "<label class='radio-inline'>";
print "<input type='radio' name='q$i' value='1'>Yes";
print "</label>";
print "<label class='radio-inline'>";
print "<input type='radio' name='q$i' value='-1'>No";
print "</label>";
print "</div>";
print "</div>";
}
?>
Javascript
$(function(){
$('#questionaire-form').submit(function(e){
e.preventDefault();
var prevname = "";
var questions = [];
$('.radio-inline').each(function(){
//$(this).next($(this)).is(':checked'));
var curname = $(this).find('input[type="radio"]').attr('name');
if(prevname == curname){
if(!$(this).find('input[name='+curname+']').is(':checked') && $(this).closest('div').find('p').hasClass('text-danger')){
return true; //skip to the next element
}else if(!$(this).find('input[name='+curname+']').is(':checked') && !$(this).closest('div').find('p').hasClass('text-danger')){
$(this).closest('div').find('p').addClass('text-danger');
}else if($(this).find('input[name='+curname+']').is(':checked') && $(this).closest('div').find('p').hasClass('text-danger')){
$(this).closest('div').find('p').removeClass('text-danger');
}else{
$(this).closest('div').find('p').removeClass('text-danger');
}
}
prevname = curname;
});
var go;
$('.radio-inline').closest('div').find('p').each(function(){
if($(this).hasClass('text-danger')){
go = false;
return false;
}else{
go = true;
}
});
if(go){
}
});
});
Please ask for more information if needed. I've been stuck on this for a while now, and I'd like to solve it quickly. Radio button validation has always been my weakness, so conquering that today would be great
How about this :
var go = true;
$(".form-group").each(function () {
if($(this).find('input[type="radio"]:checked').length == 0) {
//nothing checked so error.
$(this).find('p').addClass('text-danger');
go = false;
}
else {
$(this).find('p').removeClass('text-danger');
}
});
if(!go)
{return false;}
//continue and do what you like
UPDATE
Tested in fiddle : http://jsfiddle.net/6k0nusfb/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With