Skip navigation
Currently Being Moderated

Making a form field required when another field is selected

Dec 5, 2012 10:58 AM

Tags: #spry #form #required

I have a contact form with the usual fields required (name, address, city, etc.). I'm adding a Country pull-down list to the form, which will default to the US being selected. Since a "State" field is not relevant for anyone filling out the form from another country, I'd like to make the State field required only if the country selected is United States, and not required for any other country. Is there a way to do this?

 

Thanks,

R-Co

 
Replies
  • Currently Being Moderated
    Dec 5, 2012 11:22 AM   in reply to R-Co

    JavaScript.

     

    <select name="country" id="country">

    <option value="Algeria">Algeria</option>

    ...

    <option value="US" selected>US</option>

    ...

    <option value="Zimbabwe">Zimbabwe</option><!--- Yes, I do not know what is last, alphabetically.. or first.. just for placement --->

    </select>

     

    function validateData(){

    /* typical validation stuff */

    if(document.getElementById("country").value == "US"){ // If country is US

      if(document.getElementById("state").selectedIndex == 0){ // If a state is not selected - assumes first option is <option value="">State</option> or similar

      // throw alert, or whatever to indicate state is needed

        }

      }

     

    ^_^

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 11:31 AM   in reply to R-Co

    The US isn't the only country to have States/Provinces, you know? 

    What about Canada, Australia, Turkey, Thailand, Netherlands and about 55 other countries?

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 11:43 AM   in reply to R-Co

    The form validation function should be placed between <script type="text/javascript"> and </script> tags just before the closing  </body>  tag.

     

    ^_^

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 4:18 PM   in reply to R-Co

    What you need is to be able to create a required textfield when the first textfield shows USA and destroy the required field when another country is selected.

     

    The following may help to understand create and destroy

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Deleting and rebuilding validations</title>

    <link href="http://labs.adobe.com/technologies/spry/widgets/textfieldvalidation/Sp ryValidationTextField.css" rel="stylesheet">

    </head>

     

    <body>

    <form id="form1" method="post" action="#">

      <p>

        <input type="radio" name="radio" id="Married" value="Married" onclick="val(this);">

        <label for="Married">Married</label>

      </p>

      <p>

        <input type="radio" name="radio" id="Defacto" value="Defacto" onclick="val(this);">

        <label for="Defacto">Defacto</label>

      </p>

      <p>

        <input type="radio" name="radio" id="Single" value="Single" onclick="val(this);">

        <label for="radio">Single</label>

      </p>

      <hr>

      <span id="sprytextfield1">

        <label for="f_married">Married</label>

        <input name="married" id="f_married" type="text" value="">

        <span class="textfieldRequiredMsg">A value is required.</span>

      </span>

      <span id="sprytextfield2">

        <label for="f_defacto">Defacto</label>

        <input name="defacto" id="f_defacto" type="text" value="">

        <span class="textfieldRequiredMsg">A value is required.</span>

      </span>

      <span id="sprytextfield3">

        <label for="f_single">Single</label>

        <input name="single" id="f_single" type="text" value="">

        <span class="textfieldRequiredMsg">A value is required.</span>

      </span>

      <hr>

      <input type="submit" value="Submit" />

    </form>

    <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryValidati onTextField.js"></script>

    <script>

    var sprytextfield1,

            sprytextfield2,

            sprytextfield3;

    // build validations and delete / destroy them

    function val(e){

        // get the value

        value = e.value;

        // see what radion button we have

        if(value == "Married"){

            // if there inst a validaton build one

            if(!sprytextfield1){

                sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");

            }

            // if there is a validaiton in sprytextfield destory it, and clear the variable

            if(sprytextfield2 && sprytextfield2.destroy){

                sprytextfield2.resetClasses();

                sprytextfield2.destroy();

                sprytextfield2 = null;

            }

            // same as the rest

            if(sprytextfield3 && sprytextfield3.destroy){

                sprytextfield3.resetClasses();

                sprytextfield3.destroy();

                sprytextfield3 = null;

            }

        } else if(value == 'Defacto'){

            if(!sprytextfield2){

                sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");

            }

            if(sprytextfield1 && sprytextfield1.destroy){

                sprytextfield1.resetClasses();

                sprytextfield1.destroy();

                sprytextfield1 = null;

            }

            if(sprytextfield3 && sprytextfield3.destroy){

                sprytextfield3.resetClasses();

                sprytextfield3.destroy();

                sprytextfield3 = null;

            }

        } else if(value == 'Single'){

            if(!sprytextfield3){

                sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");

            }

            if(sprytextfield1 && sprytextfield1.destroy){

                sprytextfield1.resetClasses();

                sprytextfield1.destroy();

                sprytextfield1 = null;

            }

            if(sprytextfield2 && sprytextfield2.destroy){

                sprytextfield2.resetClasses();

                sprytextfield2.destroy();

                sprytextfield2 = null;

            }

        }

        // proceed with the rest as normal

        return true;

    };

    </script>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 6, 2012 3:48 PM   in reply to R-Co

    I think it is better to swap the country and state around, have the state hidden until the value of country is United States. You can then un-hide states and create the validation. When the value of country changes away from United States, destroy the validation and hide the select.

     

    I do not have a ready made solution to show you, but there is plenty of assistance on line; just Google the subject

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points