Conditional Requirement

  • Hello

    I have a requirement by which when I select the ‘MOBILE’ checkbox the ‘radius’ input field should become a required field.

    //code for my form
    `<fieldset>
    <legend>Section 1. Contact Information</legend>

    <!– 1 first name, last name –>

    <div class=”horizontalBlock”>
    <div class=”leftBlock”>
    <div class=”blockNameLeft”>
    <label for=”company”> Company</label>
    </div>
    <div class=”blockFieldLeft”>
    [text* company id:company placeholder “Company”]
    </div>
    </div>
    <div class=”rightBlock”>
    <div class=”blockNameRight”>
    <label for=”address”> Business Address</label>
    </div>
    <div class=”blockFieldRight”>
    [text* address id:address placeholder “Business Address”]
    </div>
    </div>
    </div>

    <!– 2 city, state –>

    <div class=”horizontalBlock”>
    <div class=”leftBlock”>
    <div class=”blockNameLeft”>
    <label for=”city”> City</label>
    </div>
    <div class=”blockFieldLeft”>
    [text* city id:city placeholder “City”]
    </div>
    </div>
    <div class=”rightBlock”>
    <div class=”blockNameRight”>
    <label for=”state”> State / Province</label>
    </div>
    <div class=”blockFieldRight”>
    [select* state id:state first_as_label data:us_subdivisions.states data:us_subdivisions.districts data:ca_subdivisions.provinces “State / Province” ]
    </div>
    </div>
    </div>

    <!– 3 Zip, Tax ID –>

    <div class=”horizontalBlock”>
    <div class=”leftBlock”>
    <div class=”blockNameLeft”>
    <label for=”zip”>Zip</label>
    </div>
    <div class=”blockFieldLeft”>
    [text* zip id:zip placeholder “Zip”]
    </div>
    </div>
    <div class=”rightBlock”>
    <div class=”blockNameRight”>
    <label for=”tax-id”>Tax ID</label>
    </div>
    <div class=”blockFieldRight”>
    [text* tax-id id:tax-id placeholder “Tax ID”]
    </div>
    </div>
    </div>

    <!– 4 contactperson, contact title –>

    <div class=”horizontalBlock”>
    <div class=”leftBlock”>
    <div class=”blockNameLeft”>
    <label for=”name”> Contact Person</label>
    </div>
    <div class=”blockFieldLeft”>
    [text* name id:name placeholder “Name”]
    </div>
    </div>
    <div class=”rightBlock”>
    <div class=”blockNameRight”>
    <label for=”title”> Contact Title</label>
    </div>
    <div class=”blockFieldRight”>
    [text title id:title placeholder "Title"]
    </div>
    </div>
    </div>

    <!– 5 contactperson, contact title –>

    <div class=”horizontalBlock”>
    <div class=”leftBlock”>
    <div class=”blockNameLeft”>
    <label for=”email”> Email Address</label>
    </div>
    <div class=”blockFieldLeft”>
    [email* email id:email placeholder “Email Address”]
    </div>
    </div>
    <div class=”rightBlock”>
    <div class=”blockNameRight”>
    <label for=”phone”> Contact Phone</label>
    </div>
    <div class=”blockFieldRight”>
    [tel* phone id:phone placeholder “Phone Number”]
    </div>
    </div>
    </div>
    </fieldset>
    <fieldset>
    <legend>Section 2. Company Information</legend>
    [checkbox* services1 id:services1 “MOBILE” “SHOP”]

    <!– 6 how long, service radius –>

    <div class=”horizontalBlock”>
    <div class=”leftBlock”>
    <div class=”blockNameLeft”>
    <label for=”howlong”> How long have you been in business?</label>
    </div>
    <div class=”blockFieldLeft”>
    [number* howlong min:1 max:200 step:.5 id:howlong placeholder “1”] years
    </div>
    </div>
    <div class=”rightBlock”>
    <div class=”blockNameRight”>
    <label for=”radius”> Service Radius</label>
    </div>
    <div class=”blockFieldRight”>
    [number radius min:5 max:100 id:radius placeholder “5”] miles
    </div>
    </div>
    </div>
    </fieldset>
    <fieldset>
    <legend>Section 3. Services Provided</legend>

    <!– 7 services provided –>

    <div class=”horizontalBlock”>
    <div style=”float: left;min-width:30%;” >
    <h5 style=”margin: 20px 10px 0px 15px;”>PDR</h5>
    [checkbox* services id:services2 “PDR” “HAIL”]
    </div>
    <div style=”float: left;min-width:30%”>
    <h5 style=”margin: 20px 10px 0px 15px;”>EXTERIOR</h5>
    [checkbox services id:services3 “WHEEL REPAIR” “WINDSHIELD REPAIR” “DETAILING”]
    </div>
    <div style=”float: left;min-width:30%”>
    <h5 style=”margin: 20px 10px 0px 15px;”>INTERIOR</h5>
    [checkbox services id:services4 “LEATHER/VINYL” “FABRICS”]
    </div>
    </div>
    </fieldset>[submit class:btn_blue id:form-next “Next”]
    //end

Viewing 2 replies - 1 through 2 (of 2 total)

  • the custom validation fits very well in your case

    https://contactform7.com/2015/03/28/custom-validation/

    if mobile == true && radius == ” -> return validation errors

    Thread Starter ronwes12345

    (@ronwes12345)

    I need to check for mobile checkbox and then show radius text box is required

    <?php

/**
 * Each field type has its own validation filter,
 * so we create a function for each type
 */
add_filter( 'wpcf7_validate_text', 'custom_email_confirmation_validation_filter', 20, 2 );

function custom_email_confirmation_validation_filter( $result, $tag ) {
  if ( 'radius' == $tag->name ) {
    $mobile = isset( $_POST['services1'] ) ? trim( $_POST['services1'] ) : '';
  
    if ( $mobile == "MOBILE" ) {
      $result->invalidate( $tag, "Radius field is required" );
    }
  }
  
  return $result;
}
?>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Conditional Requirement’ is closed to new replies.

Tags