CODEWITHSUNDEEP
jqueryformsvalidation
SupaOden
SupaOden

Reputation: 742

jQuery form validation with checkboxes

<form name="author-form" accept-charset="utf-8" method="post">

<input type="checkbox" id="checklist-1" name="checklist[]" value="0"  required /></td>

<label for="checklist-1">The submission has not been previously published, nor is it before another journal for consideration (or an explanation has been provided in Comments to the Editor).</label>

<input type="checkbox" id="checklist-2" name="checklist[]" value="1" required />
<label for="checklist-2">The submission file is in OpenOffice, Microsoft Word, RTF, or WordPerfect document file format.</label>

<input type="checkbox" id="checklist-3" name="checklist[]" value="2" required />
<label for="checklist-3">Where available, URLs for the references have been provided.</label>

<input type="checkbox" id="checklist-4" name="checklist[]" value="3" required />
<label for="checklist-4">The text is single-spaced; uses a 12-point font; employs italics, rather than underlining (except with URL addresses); and all illustrations, figures, and tables are placed within the text at the appropriate points, rather than at the end.</label>

<input type="checkbox" id="checklist-5" name="checklist[]" value="4" required />
<label for="checklist-5">The text adheres to the stylistic and bibliographic requirements outlined in the <a href="http://42.201.215.2/ojs/index.php/JISRComputing/about/submissions#authorGuidelines" target="_new">Author Guidelines</a>, which is found in About the Journal.</label>

<input type="checkbox" id="checklist-6" name="checklist[]" value="5" required />
<label for="checklist-6">If submitting to a peer-reviewed section of the journal, the instructions in <a href="javascript:openHelp('http://42.201.215.2/ojs/index.php/JISRComputing/help/view/editorial/topic/000044')">Ensuring a Blind Review</a> have been followed.</label>


<textarea name="commentsToEditor" id="commentsToEditor" rows="3" cols="40" class="textArea" placeholder="Comments to the Editor" required></textarea>

<input type="submit" name="submit-1" class="btn disabled" value="Continue">

</form>

I want to change the css class of submit when all the checkbox have been checked and at least one word has been written in the text area. The class should be like this if all of the rules have been met, and if one rule is not met,, then it should be disabled again

<input type="submit" name="submit-1" class="btn success" value="Continue">

How can i define a jQuery function that can only enable the submit button if checkbox are clicked and word has been entered in textarea?

Upvotes: 0

Views: 832

Answers (1)

Rafay
Rafay

Reputation: 31043

initially disabled the submit button then attach a change event handler to the checkboxes

$(":checkbox,textarea").change(function(){
 if(($(":checkbox").length== $(":checkbox:checked").length) && $("textarea").val()!=""){
  $(":submit").addClass("success").removeAttr("disabled");

 }
});

DEMO

Upvotes: 2

Related Questions