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