单选按钮未通过验证

Question

URL: Form not working

I have the following script which should validate the form and submit like this example here: form working

But for some reason it's not working on the first link.

My Javascript code remained the same:

$("form").submit(function () {
    var html = '';
    var submitme = true;
    $(':radio').each(function() {
        nam = $(this).attr('name');
        if (!$(':radio[name="'+nam+'"]:checked').length) {
            $(':radio[name="'+nam+'"]+label').addClass('error');
            if(html.indexOf(nam) < 0){
                html += nam +' group not checked' + '</br>';
            }
            submitme = false;
        }
        else {
            $(':radio[name="'+nam+'"]+label').removeClass('error');
        }
    });
    if(submitme == false){
        $('.errorDiv').empty().append(html).show().addClass('error');
    }
    else{
        $('.errorDiv').hide();
    }

    return submitme;
});

What I am looking to do is validate the form and make any radio button not chosen RED and not submit the form. Once the user selects all the form radios, the form should submit.

I also had this code which disables the submit button once everything is selected so user cannot submit twice:

$("form").submit(function () {  
        var form = $(this);
        form.find("input[type=submit]").attr("disabled", "disabled")
        form.find("input[type=submit]").attr("value", "Processing...");
        // prevent the user from hitting ENTER on a field to submit again
        form.find("input").attr("readonly", true);
        document.body.style.cursor = "wait";
});

Any idea where to put that in the previous jquery code snippet?

Answer 1

You have to include that code on the page for it to work.

Your file linked in as miscScripts.js is invalid javascript.

It starts with:

<!--

// function to swap inner DIVs in homepage left content
function showDiv(div_number) {

and end with

});
-->

It SHOULD be: (remove the page level comments markup)

// function to swap inner DIVs in homepage left content
function showDiv(div_number) {

and end with

});

FYI I don't see that "submit" code in any file, which file on your page IS it in?

These are the links on the source of that page:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="theScriptsStyles/miscScripts.js"></script>


<script type="text/javascript" src="theScriptsStyles/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="theScriptsStyles/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="theScriptsStyles/jquery.naviDropDown.1.0.js"></script>

EDIT2: OK, I took a moment to look over your code, seemed a bit odd in places, I made some gross assumptions in your objective and reworked your code to produce this:

NOTE: I used the change event to turn off the red errors as the user corrects the form. You can use that, or modify as you see fit.

$("form#myform").submit(function (e) {
    var myform = $(this); //done this way in case selector has multiple forms
    var invalidCount = myform.data('hasinvalidentries'); //check validation
    if (invalidCount === 0) { //0 not falsy value as 0 set errors check below
        return; // let the event bubble away
    }
    e.preventDefault(); //not check so prevent submit
    var mysubmitButton = myform.find("input[type=submit]");
    mysubmitButton.prop("disabled", true).data('buttontext', mysubmitButton.val()).val('processing...');
    document.body.style.cursor = "wait";
    var html = '';
    var submitme = true;
    $('input[type=radio]').each(function () {
        var nam = $(this).attr('name');
        var radioGroup = myform.find('input:radio[name="' + nam + '"]');
        if (!radioGroup.is(':checked')) {
            radioGroup.next('label').addClass('error');
            if (html.indexOf(nam) < 0) {
                html += nam + ' group not checked' + '<br />';
            }
            submitme = false;
        }
    });

    if (submitme) {
        $('.errorDiv').hide();
        myform.data('hasinvalidentries', 0).submit();
    } else {
        $('.errorDiv').empty().append(html).show().addClass('error');
        return submitme;
    }
});
/* Check to set the radio group as no errors when change one as one will have to be selected.
  Still possible if I manually using code set all to unselected, but acts on users changes at least.
  */
$('form#myform').on('change', 'input:radio', function () {
    var myform = $(this).parents('form'); //done this wa in case selector incudes multiple forms
    var errorCount = myform.find('.error').length;
    if (errorCount) {
        var nam = $(this).attr('name');
        myform.find(':radio[name="' + nam + '"]+label').removeClass('error');
        var mysubmitButton = myform.find("input[type=submit]");
        mysubmitButton.removeProp("disabled").val(mysubmitButton.data('buttontext'));
        errorCount = myform.find('.error').length;
        myform.data('hasinvalidentries', errorCount);
    }
});  

Here is a working example of that code: http://jsfiddle.net/whNtP/