Javascript validation of dependent form fields

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • rush it
    New Member
    • Oct 2011
    • 18

    Javascript validation of dependent form fields

    First off, let me say I'm pretty new to web design and programming in general. Call it a career change. But I love it. :)

    I'm building an online form for users to apply for a discount on park sports for their child. In this form, I need to have one of the fields validate another. Field_1, a radio button, is in one section of the form but I can't validate it because it may not apply to all users. Field_2, a checkbox, is in the section below it, related to Field_1, and does require validation.

    Field_1 is the 'Free Lunch' selection in an area that asks users which lunch program their child is in at school. (A criterion for receiving the park sports discount.)

    Field_2 asks the user to agree that they understand that if their child is enrolled in the free lunch, they only pay 25% of the park sports fee. (I hope this is all making sense. I'm trying to break it down into sections.)

    I would like to have the '25%' checkbox, if selected, prompt the user to check the 'Free Lunch' radio button. I know this can be done for matching values, but I just want to check for field selection.

    This is what I have for a simple field.

    Code:
    var s=document.forms["form2"]["name"].value
    	if (s==null || s=="")
      {
      alert("Please enter Name");
      return false;
      }

    This works fine for the simple fields. I've been researching how to have Field_2 validate Field_1, and quite frankly, I'm very confused as to which way I should go.

    This is something I came across, but it doesn't work, I think, because this function calls for names, not values, and I'm working with radio buttons and checkboxes. It simply doesn't not validate the field at all.

    Code:
    var tos = new Ext.form.checkbox({ 
          name: 'free', 
          fieldLabel: 'free' 
         }); 
      var lunch_program = new Ext.form.radio({ 
          name: 'Free Lunch', 
          fieldLabel: 'Free Lunch' 
     	  validator: function(checked){ 
        if(free.getValue() != checked) { 
            return 'Please select 'Free Lunch Participant' under 'Does your child particpate in the school's free and reduced program?' ; 
          } else {
         return true; 
        }
    I'd appreciate any guidance anyone can suggest.
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Are you currently using the Ext JS library or did you use it because you found this code?

    Comment

    • rush it
      New Member
      • Oct 2011
      • 18

      #3
      I was already using javascript when I found this code.

      Comment

      • Rabbit
        Recognized Expert MVP
        • Jan 2007
        • 12517

        #4
        He's asking if you are using the EXT library on purpose. Because you can't just start using it out of nowhere.

        Comment

        • rush it
          New Member
          • Oct 2011
          • 18

          #5
          Well, as I said in my original post, I'm new to web design and pretty new to programming. I've not even heard of the Ext library before. I see the Ext in the code now. This code is just an example. If there's another way to do this in just javascript, IF that makes sense, that would be great. Right now, I'm hung up on the syntax. Thanks.

          Comment

          • gits
            Recognized Expert Moderator Expert
            • May 2007
            • 5388

            #6
            to simplyfy that all - please post an example of your code with a description of the requirement, and don't post snippets that you don't use. so in short words: what exactly do you have so far?

            regards,
            gits

            Comment

            Working...