Link: Issue with Form
I've encountered a problem with my script that is meant to validate and submit a form, similar to this working example: Form in Working Order
Unfortunately, the script is not functioning as intended on the first link.
The JavaScript code remains unchanged:
$("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;
});
I aim to validate the form so that any unselected radio buttons are highlighted in RED and prevent form submission. Once all radio options are chosen, the form should be able to submit successfully.
In addition, I have a code snippet which disables the submit button after selection to prevent double submissions:
$("form").submit(function () {
var form = $(this);
form.find("input[type=submit]").attr("disabled", "disabled")
form.find("input[type=submit]").attr("value", "Processing...");
// ensure user cannot hit ENTER key to submit again
form.find("input").attr("readonly", true);
document.body.style.cursor = "wait";
});
Can anyone suggest where to include this additional functionality within the existing jQuery code segment?