How to make a mandatory field once the parent field is input

Hi,

Here is a brief explanation of what I'm trying to achieve:

I need to make a field mantory once a field has been input which is not mandatory.
In other words.... eg.

I have a licence number field for a person to fill their 'license number' in if they have one(Not a mandatory field). I also have a 'license version no' field beside it which is also not mandatory. If they don't have a license number they don't have to fill one in and they can carry on with the rest of the form. Now if they do fill in their 'license number', I would like the 'license version no.' beside it to become mandatory.

I'm not sure how to achieve this. Can someone please help me out?
Please let me know if you don't understand.

Hi badbrad,

Try this JavaScript snippet

onChange="if ( this.value != '' ) document.getElementById('text_1').addClass('required');"

where 'text_1' is the id of the second box.

Here's the html for a simple test form.

<div  class="form_item">
    <div class="form_element cf_textbox">
        <label class="cf_label">Box 1</label>
        <input class="cf_inputbox" maxlength="150" size="30" id="text_0" name="text_0" type="text" onChange="if ( this.value != '' ) document.getElementById('text_1').addClass('required');" />
    </div>
    <div class="clear"> </div>
</div>
<div  class="form_item">
    <div class="form_element cf_textbox">
        <label for='text_1' class="cf_label">Box 2</label>
        <input class="cf_inputbox" maxlength="150" size="30" id="text_1" name="text_1" type="text" />
    </div>
    <div class="clear"> </div>
</div>
<div  class="form_item">
    <div class="form_element cf_textbox">
        <input type='submit' name='submit' value='submit' />
    </div>
    <div class="clear"> </div>
</div>

Bob

It works! Thank you so much!

One small thing though. If i have fill the license no. in and then tried to submit...I get the required field...which is all good. But if I then remove the license no, it doesn't remove the 'required field' alert. How do I get it to do that?

All the other mandatory fields dissapear once I have filled in their fields.

This is the link to the page I'm working on. Please take a look.

http://www.crester.co.nz/alternate-finance/pre-loan-approval

Many thanks

Hi badbrad,

I guess that you get to learn JavaScript :-)

Bob

I guess I do thanks. But is it possible someone can help me in the meantime?

Hi badbrad,

How's the learning going?

Try

onChange="if ( this.value != '' ) { document.getElementById('text_1').addClass('required') } else { document.getElementById('text_1').removeClass('required') };"

NB: not tested and may not work!

Bob

Later: added a missing { - see Sweder's post later in this thread.

Hi,

it works after adding an additional '{' right after the logical expression of the if-statement, i.e. the '{' to open the then-part block-statement. :?

Here's the code:

onChange="if ( this.value != '' ) {document.getElementById('text_1').addClass('required') } else {document.getElementById('text_1').removeClass('required')};" 

I use this with a checkbox. Switching the checkbox on and off still confuses my form. It keeps requiring the 'text_1' textbox. I'll let you know as soon as I got it working. Or anyone already solved this?

Regards,

Sweder

Hi Sweder,

IIRC checkboxes don't have values - they have a 'check' (or 'checked') property.

Bob

Hi Bob,

Thanks you for the tip. I now use 'if (this.checked) ...' which works OK. However, after getting the message 'field required', it won't go away after un-checking the checkbox (unless I provide a value).

Is the message still shown even if the latest validation turns out to be OK?

Kind regards,

Sweder

Hi Sweder,

I think you need to do this check:

if(this.checked == true)

Cheers
Max

Hi Max,

Thanks for your advice. I don't expect this to change the behaviour since 'this->checked' is of type boolean. Tried it anyway and noticed no changed behaviour.

I'm also looking at quirksmode.org/dom/usableforms.html.

Regards,

Sweder

show me the HTML code and I may help, but I "may" be off for a few hours!

Max

Hello Max,

thank you in advance for spending your time on this!

Here's the (relevant) code:

<DIV class=form_item>
<DIV class="form_element cf_checkbox"> 
<DIV class=float_left><INPUT class=radio id=check_1 type=checkbox name=check_1 onChange="if ( this.checked == true) {document.getElementById('text_15').addClass('required')} else {document.getElementById('text_15').removeClass('required')};" >
<LABEL class=check_label for=check_1>Send me a confirmation e-mail</LABEL><BR></DIV></DIV>
<DIV class=clear> </DIV></DIV>

<DIV class=form_item   >
<DIV class="form_element cf_textbox" ><LABEL class="cf_label" title="Your e-mailaddress. We will send you a confirmation.">E-mail</LABEL><INPUT class="cf_inputbox validate-email" id=text_15  maxLength=150 size=30 name=text_15 ></DIV>
<DIV class=clear > </DIV></DIV>

Regards,

Sweder

Hi Sweder,

try this code then:

if ( $('check_1').checked == true) {$('text_15').addClass('required')} else {$('text_15').removeClass('required')};

and it should work assuming that mootools is loaded at this page ?

Max

Hi,

how can I check that mooTools is loaded? Should I just check on the validation admin tab? Or is there another way to verify?

I tried your code, but same behaviour as before. Did you manage to test it? If so, could you send me your test form?

Is there a way to check if the addClass and removeClass functions work as expected?

Kind regards,

Sweder

Hi Sweder,

The easy answer is to use FireFox with the FireBug extension - you can easily get a drop down list of all the scripts loaded on the page. It will also give you JavaScript debugging which will answer your second question (though there's more of a learning curve with that).

Bob