Databases
StackOverflow2013
Postsdbo
POConditionally set an attribute of input fields to required if a checkbox is selected using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConditionally set an attribute of input fields to required if a checkbox is selected using jQuery
    primarykey
    data
    text
    <p>I'm using the jquery Tools validator plugin and I have a form with several sections. Each section has a checkbox at the top that I want to be like a main switch for each section - to programatically turn on/off functionality (like validation) for text boxes &amp; email fields in each section. </p> <p>Basically, I wanted to conditionally set an attribute of 'text' and/or 'email' type input field(s) to "required" if the corresponding group checkbox is selected. Admittedly, I'm not that good with jQuery. </p> <p>Each form section is similar to below but may have a different number of text and/or email fields:</p> <pre><code>&lt;input type="checkbox" group-name="mail" name="mail" id="mail_enable" checked="&lt;?= (chkConfig("mail_enable", 0) ? "yes" : "no"); ?&gt;" onChange="chkRequired('mail');" title='check this box to send the specified reports to your email.' &gt; &lt;label for="mail_enable"&gt;notify me when the batch is complete.&lt;/label&gt;&lt;/div&gt; &lt;div class="left"&gt;&lt;label for="lblemailid"&gt;Email Address: &lt;/label&gt;&lt;/div&gt; &lt;div class="right"&gt;&lt;input type="email" group-name="mail" name="mailto" id="emailAddress" size="30" maxlength="50" /&gt; </code></pre> <p>I created an attribute called group-name and all of the fields in a section share the same group-name. and with the help of Mr. Frédéric Hamidi (in our discussion below) we have modified my function. here is the latest version:</p> <pre><code> function chkRequired(group){ var groupCheckBox = $("#" + group + "_enable"); var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']"; var fieldSelector = "input[type=text], input[type=email]"; if ( $(groupCheckBox).is(':checked')) { $(groupSelector).add(fieldSelector).attr("required"); } else { $(groupSelector).add(fieldSelector).removeAttr("required"); } } </code></pre> <p>I hope this helps anyone else in a similar situation.</p> <p>I still cant figure out the selector syntax to attach it to the doc.ready() amd .change() globally. but it works if you assign the function to the onChange event for the fields, manually. </p> <p>Also, if anyone can help me with the syntax for validator.addMethod() so we can just create a custom validation method - that would be appreciated.</p> <p>Special thanks to Mr. Frédéric Hamidi for helping me work out the logic.</p> <p>I've created a more detailed tutorial if anyone is interested @ <a href="http://www.logicwizards.net/2010/12/07/jquery-tools-custom-validator-mod/" rel="nofollow">http://www.logicwizards.net/2010/12/07/jquery-tools-custom-validator-mod/</a> </p> <p>Joe Negron: Logic Wizards ~ NYC</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSparky
    1. USWWWIZARDS
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POConditionally set an attribute of input fields to required if a checkbox is selected using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POConditionally set an attribute of input fields to required if a checkbox is selected using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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