Databases
StackOverflow2013
Postsdbo
POJavascript Validation of both Checkboxes and Radio Buttons
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Validation of both Checkboxes and Radio Buttons
    text
    copied!<p>I am doing a checklist that needs to be completed each time a member of staff completes this particular form. Please note that I am still grasping JS slowly due to not having a large amount of time to research.</p> <p>I have done a bit of research and combined some different validation styles and come up with this;</p> <pre><code>function validate(form) { var e = form.elements; if(e['reloaded'].value == "yes") { if(!e['Q1-A'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Q1-B'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Q1-C'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Q1-D'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Q1-E'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Q1-G'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Gen-A'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Gen-B'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['invoice_number'].value) { alert('Invoice Number is REQUIRED!'); return false; } return true; } else if(e['reloaded'].value == "no") { if(!e['Gen-A'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Gen-B'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['Q2-A'].value) { alert('You Must complete the Checklist!'); return false; } if(!e['invoice_number'].value) { alert('Invoice Number is REQUIRED!'); return false; } return true; } else if(!e['reloaded'].value) { alert('You must indicate if you Reloaded the OS!'); return false; } } </code></pre> <p>At this stage it is simply returning "You must indicate if you Reloaded the OS!" even when it is selected.</p> <p>The point is to select an option from a radiobutton selection, then it will show some checkboxes and all checkboxes must be checked before the form can be submitted. Obviously some checkboxes only show if a particular option is selected and as such some need to be excluded from being required. There is also an additional field that needs to be filled (invoice_number) which has always had validation on it and has always worked.</p> <p>The Radio Buttons:</p> <pre><code>&lt;input name="reloaded" id="reloaded" type="radio" value="yes" onClick="Q1(this.value);" /&gt; Yes&lt;/label&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;label&gt;&lt;input name="reloaded" id="reloaded" type="radio" value="no" onClick="Q1(this.value);" /&gt; </code></pre> <p>The Checkboxes are all the same except the ID's/Names</p> <pre><code>&lt;input name="Q1-A" id="Q1-A" type="checkbox" value="yes" /&gt; </code></pre> <p>Required Text Box:</p> <pre><code>&lt;input class="field size5" type="text" name="invoice_number" id="invoice_number" placeholder="Required! - 'RA' for Warranty Jobs" /&gt; </code></pre> <p>I am sure that I have over complicated it due to my lack of knowledge, however I just cannot think of where i have gone wrong.</p> <p>(Submission is occurring via <code>onsubmit="return validate(this);"</code>)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload