当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Validate my HTMK form field after my checkbox is checked

问题描述:

I have created an html form with hidden fields that shows after checking checkbox. I want to validate these hidden fields when the checkbox is checked.

style:

.box {

display:none;

}

here javascript code:

 $(document).ready(function(){

$('input[type="checkbox"]').click(function() {

if($(this).attr("value")=="red") {

$(".box").toggle();

}

});

});

<form action="thankyou.php" method="post" name="form9" >

<label>First Name:* </label><input type="text" class="FullContactFields" name="Firstname" required title="Specify your first name"> <br><br>

<label>Last Name:* </label><input type="text" class="FullContactFields" name="Lastname" required title="Specify your last name" > <br><br>

<label>Phone:* </label><input type="text" pattern=".{10}|.{10}" required title="Enter your correct 10 digit phone number" class="FullContactFields" name="UserPhone" required ><br><br>

<label>Email:* </label><input type="email" class="FullContactFields" name="UserEmail" required title="Specify your correct email address." ><br><br>

<div class="checkbox">

<input id="check1" type="checkbox" name="colorCheckbox" value="red">

<label for="check1" class="CheckboxLabel">I would also like quotes for moving my vehicle</label>

</div>

<div class="box">

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tbody>

<td width="52%" valign="top" class="txtmatterarl2" rowspan="2">

</td></tbody></table>

<div style="display: block; color:#fff; padding: 28px 0 0 4px;" id="autozone" fade="1" speed="400">

<!--hide /show -->

<table width="100%" cellspacing="1" cellpadding="1" border="0">

<tbody><tr>

<td width="6%" align="left">&nbsp;</td>

<td width="16%" align="left"><b><font color="#fff" class="headingcontact">Vehicle Details:</font></b></td>

<td width="7%" align="left">&nbsp;</td>

<td width="71%" align="left" nowrap="nowrap"><b><font color="#fff" class="headingcontact">Vehicle #2 (Optional):</font></b></td>

</tr>

<tr>

<td height="35" align="left" class="nish4"><font color="#fff">Make:</td>

<td align="left">

<select onChange="FillList()" class="TextBox3 nish" id="vehicle1_make" size="1" name="vehicle1_make">

<option selected="selected" value="">Select Vehicle</option>

<option value="Acura">Acura</option>

<option value="Alfa Romeo">Alfa Romeo</option>

<option value="AMC">AMC</option>

<option value="Aston Martin">Aston Martin</option>

<option value="ATV">ATV</option>

<option value="Auburn">Auburn</option>

<option value="Audi">Audi</option>

<option value="Austin-Healey">Austin-Healey</option>

<option value="Bentley">Bentley</option>

<option value="BMW">BMW</option>

<option value="Bricklin">Bricklin</option>

<option value="Buick">Buick</option>

<option value="Cadillac">Cadillac</option>

<option value="Chevy">Chevy</option>

<option value="Chrysler">Chrysler</option>

<option value="Citroen">Citroen</option>

<option value="Daewoo">Daewoo</option>

<option value="Daihatsu">Daihatsu</option>

<option value="Datsun">Datsun</option>

<option value="Delorean">Delorean</option>

<option value="Dodge">Dodge</option>

<option value="Eagle">Eagle</option>

<option value="Edsel">Edsel</option>

<option value="Ferrari">Ferrari</option>

<option value="Fiat">Fiat</option>

<option value="Fisker">Fisker</option>

<option value="Ford">Ford</option>

<option value="Geo">Geo</option>

<option value="GMC">GMC</option>

<option value="Graham">Graham</option>

<option value="Harley Davidson">Harley Davidson</option>

<option value="Honda">Honda</option>

<option value="Hudson">Hudson</option>

<option value="Hummer">Hummer</option>

<option value="Hyundai">Hyundai</option>

<option value="Infiniti">Infiniti</option>

<option value="International">International</option>

<option value="Isuzu">Isuzu</option>

<option value="Jaguar">Jaguar</option>

<option value="Jeep">Jeep</option>

<option value="Kia">Kia</option>

<option value="Lamborghini">Lamborghini</option>

<option value="Land Rover">Land Rover</option>

<option value="Lasalle">Lasalle</option>

<option value="Lexus">Lexus</option>

<option value="Lincoln">Lincoln</option>

<option value="Lotus">Lotus</option>

<option value="Marmon">Marmon</option>

<option value="Maserati">Maserati</option>

<option value="Maybach">Maybach</option>

<option value="Mazda">Mazda</option>

<option value="McLaren">McLaren</option>

<option value="Mercedes-Benz">Mercedes-Benz</option>

<option value="Mercury">Mercury</option>

<option value="Merkur">Merkur</option>

<option value="MG">MG</option>

<option value="MINI">MINI</option>

<option value="Mitsubishi">Mitsubishi</option>

<option value="Morgan">Morgan</option>

<option value="Nash">Nash</option>

<option value="Nissan">Nissan</option>

<option value="Oldsmobile">Oldsmobile</option>

<option value="Opel">Opel</option>

<option value="Packard">Packard</option>

<option value="Panoz">Panoz</option>

<option value="Plymouth">Plymouth</option>

<option value="Pontiac">Pontiac</option>

<option value="Porsche">Porsche</option>

<option value="Renault">Renault</option>

<option value="Rolls-Royce">Rolls-Royce</option>

<option value="Saab">Saab</option>

<option value="Saturn">Saturn</option>

<option value="Scion">Scion</option>

<option value="Smart">Smart</option>

<option value="Sterling">Sterling</option>

<option value="Studebaker">Studebaker</option>

<option value="Subaru">Subaru</option>

<option value="Sunbeam">Sunbeam</option>

<option value="Suzuki">Suzuki</option>

<option value="Talbo">Talbo</option>

<option value="Tesla">Tesla</option>

<option value="Toyota">Toyota</option>

<option value="Triumph">Triumph</option>

<option value="Vanden Plas">Vanden Plas</option>

<option value="Volkswagen">Volkswagen</option>

<option value="Volvo">Volvo</option>

<option value="Willys">Willys</option>

<option value="Yugo">Yugo</option>

</select>

</td>

<td align="left" class="nish4"><font color="#fff">Make:</td>

<td align="left" >

<select onChange="FillList2()" class="TextBox3 nish" id="vehicle2_make" size="1" name="vehicle2_make">

<option selected="selected" value="">Select Vehicle</option>

<option value="Acura">Acura</option>

<option value="Alfa Romeo">Alfa Romeo</option>

<option value="AMC">AMC</option>

<option value="Aston Martin">Aston Martin</option>

<option value="ATV">ATV</option>

<option value="Auburn">Auburn</option>

<option value="Audi">Audi</option>

<option value="Austin-Healey">Austin-Healey</option>

<option value="Bentley">Bentley</option>

<option value="BMW">BMW</option>

<option value="Bricklin">Bricklin</option>

<option value="Buick">Buick</option>

<option value="Cadillac">Cadillac</option>

<option value="Chevy">Chevy</option>

<option value="Chrysler">Chrysler</option>

<option value="Citroen">Citroen</option>

<option value="Daewoo">Daewoo</option>

<option value="Daihatsu">Daihatsu</option>

<option value="Datsun">Datsun</option>

<option value="Delorean">Delorean</option>

<option value="Dodge">Dodge</option>

<option value="Eagle">Eagle</option>

<option value="Edsel">Edsel</option>

<option value="Ferrari">Ferrari</option>

<option value="Fiat">Fiat</option>

<option value="Fisker">Fisker</option>

<option value="Ford">Ford</option>

<option value="Geo">Geo</option>

<option value="GMC">GMC</option>

<option value="Graham">Graham</option>

<option value="Harley Davidson">Harley Davidson</option>

<option value="Honda">Honda</option>

<option value="Hudson">Hudson</option>

<option value="Hummer">Hummer</option>

<option value="Hyundai">Hyundai</option>

<option value="Infiniti">Infiniti</option>

<option value="International">International</option>

<option value="Isuzu">Isuzu</option>

<option value="Jaguar">Jaguar</option>

<option value="Jeep">Jeep</option>

<option value="Kia">Kia</option>

<option value="Lamborghini">Lamborghini</option>

<option value="Land Rover">Land Rover</option>

<option value="Lasalle">Lasalle</option>

<option value="Lexus">Lexus</option>

<option value="Lincoln">Lincoln</option>

<option value="Lotus">Lotus</option>

<option value="Marmon">Marmon</option>

<option value="Maserati">Maserati</option>

<option value="Maybach">Maybach</option>

<option value="Mazda">Mazda</option>

<option value="McLaren">McLaren</option>

<option value="Mercedes-Benz">Mercedes-Benz</option>

<option value="Mercury">Mercury</option>

<option value="Merkur">Merkur</option>

<option value="MG">MG</option>

<option value="MINI">MINI</option>

<option value="Mitsubishi">Mitsubishi</option>

<option value="Morgan">Morgan</option>

<option value="Nash">Nash</option>

<option value="Nissan">Nissan</option>

<option value="Oldsmobile">Oldsmobile</option>

<option value="Opel">Opel</option>

<option value="Packard">Packard</option>

<option value="Panoz">Panoz</option>

<option value="Plymouth">Plymouth</option>

<option value="Pontiac">Pontiac</option>

<option value="Porsche">Porsche</option>

<option value="Renault">Renault</option>

<option value="Rolls-Royce">Rolls-Royce</option>

<option value="Saab">Saab</option>

<option value="Saturn">Saturn</option>

<option value="Scion">Scion</option>

<option value="Smart">Smart</option>

<option value="Sterling">Sterling</option>

<option value="Studebaker">Studebaker</option>

<option value="Subaru">Subaru</option>

<option value="Sunbeam">Sunbeam</option>

<option value="Suzuki">Suzuki</option>

<option value="Talbo">Talbo</option>

<option value="Tesla">Tesla</option>

<option value="Toyota">Toyota</option>

<option value="Triumph">Triumph</option>

<option value="Vanden Plas">Vanden Plas</option>

<option value="Volkswagen">Volkswagen</option>

<option value="Volvo">Volvo</option>

<option value="Willys">Willys</option>

<option value="Yugo">Yugo</option>

</select>

</td>

</tr>

<tr>

<td height="35" align="left" class="nish4"><font color="#fff">Model:</td>

<td align="left">

<select class="TextBox3 nish" id="vehicle1_model" name="vehicle1_model" >

<option value="0"> Please Select&nbsp;&nbsp;&nbsp; </option>

</select>

</td>

<td align="left" class="nish4"><font color="#fff">Model:</td>

<td align="left" style="padding: 10px 0 12px;">

<select class="TextBox3 nish" id="vehicle2_model" name="vehicle2_model">

<option value="0"> Please Select&nbsp;&nbsp;&nbsp; </option>

</select>

</td>

</tr>

<tr>

<td height="35" align="left" class="nish4"><font color="#fff">Year:</td>

<td align="left"><input type="text" size="15" id="vehicle1_year" class="TextBox3 nish" name="vehicle1_year"></td>

<td align="left" class="nish4"><font color="#fff">Year:</td>

<td align="left"><input type="text" size="15" id="vehicle2_year" class="TextBox3 nish" name="vehicle2_year"></td>

</tr>

<tr>

<td align="left">&nbsp;</td>

<td align="left">&nbsp;</td>

<td align="left">&nbsp;</td>

<td align="left">&nbsp;</td>

</tr>

</tbody></table>

</div>

</div>

<input type="hidden" name="subid" id="subid" value='<?php echo $subid; ?>'/><input type="submit" value="Get Your FREE Quotes" class="OrangeButton"></td>

</form>

</div></div>

网友答案:
    $('form[name="form9"]').on('submit', function () {
        var subidValue = $("#subid").val();
        // Now do all the validations that you want to do on the value stored in the variable subidValue
    });

$('input[type="checkbox"]').click(function() {
        if($(this).attr("value")=="red") {
            $(".box").toggle();
            // Get/Select all the fields that you want to validate right here and run the validations...
        }
});
  1. register click event for all the checkboxes
  2. if the value of the clicked checkbox is 'red'
  3. then select all the elements with class 'box' and toggle them
  4. after this since you have landed in a place where the checkbox with value 'red' is clicked, now you can write your validation code.

Hope this explains...

网友答案:
$('form[name="form9"]').on('submit', function () {
    var subidValue = $("#subid").val();
    // Now do all the validations that you want to do on the value stored in the variable subidValue
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: