Enforce a Specific Field Form Validation with Javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Stephane Landreville
    New Member
    • Aug 2010
    • 4

    #1

    Enforce a Specific Field Form Validation with Javascript

    Hi.

    Using javascript, how can I enforce users to have to select a value from a dropdown list before proceeding to entering other values on a form?

    Steph
  • johny10151981
    Top Contributor
    • Jan 2010
    • 1059

    #2
    Disable all the fields,
    When user would choose an item from drop down list enable them all.

    Comment

    • Stephane Landreville
      New Member
      • Aug 2010
      • 4

      #3
      Thanks for your quick reply.

      Code:
      function disableAll(){
      var elem = document.forms[0].elements;
      for(var i=0;i<elem.length;i++){
      elem[i].setAttribute('disabled',true)
      }
      }
      I think I got the code right, but I need some guidance to implement it correctly. Here is a quick form:

      Code:
      <form id="form1" name="form1" method="post" action="form.asp">
        <p>
          <label>Name
            <input type="text" name="Name" id="Name" />
          </label>
        </p>
        <p>
          <label>List
            <select name="test" id="test">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </label>
        </p>
        <p>
          <label>
            <input type="radio" name="radio" id="button" value="button" />
            button</label>
        </p>
        <p>&nbsp;</p>
      </form>
      I don't want the user to click on the button before he select's a value from the above dropdown list.

      Thanks,
      Steph
      Last edited by gits; Aug 11 '10, 05:19 PM. Reason: added code tags

      Comment

      • johny10151981
        Top Contributor
        • Jan 2010
        • 1059

        #4
        in your code
        Code:
        <select name="test" id="test">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select>
        The default selected is 1
        you better add another option
        Code:
        [B]<option value="0" SELECTED></option>[/B]
        now add an onChange method to your select menu. Check the condition. if it fulfills the condition then enable the Submit button.

        All can be done by javascript

        Comment

        • freefony
          New Member
          • Nov 2008
          • 59

          #5
          Sorry i ve to use this means but its related to my problem

          my form is submited even if my onsubmit function returns false

          for example
          Code:
          function validdata(){
           alert('no success');
           return false;
          }
          
          <form method='post' action='somefile.php' onsubmit='validdata();'>
          <input type='text />
          <input type='submit'/>
          </form>
          i see the alert but the form still get submited

          Comment

          • freefony
            New Member
            • Nov 2008
            • 59

            #6
            Sorry i ve to use this means but its related to my problem

            my form is submited even if my onsubmit function returns false

            for example
            Code:
            function validdata(){
             alert('no success');
             return false;
            }
            
            <form method='post' action='somefile.php' onsubmit='validdata();'>
            <input type='text />
            <input type='submit'/>
            </form>
            i see the alert but the form still get submited

            Comment

            • johny10151981
              Top Contributor
              • Jan 2010
              • 1059

              #7
              check line 6.
              try
              onsubmit="retur n validdata();"

              It will work

              Comment

              Working...