www.webdeveloper.com
Results 1 to 6 of 6

Thread: Dynamic Form Validation troubles

  1. #1
    Join Date
    Jun 2012
    Posts
    5

    Question Dynamic Form Validation troubles

    Old time CF guy needing to do some client side form validation.

    I have a form that creates some dynamic SELECT fields that are like named. CriteriaID1, CriteriaID2 etc.

    I can hard code the form and it works as expected. When I try to make it dynamic I am obviously missing something and would like a quick, swift kick in the head to right me.

    The working code is:

    if ( !checkSelect(form.CriteriaID1) ) {
    errors[errors.length] = "You must answer Criteria 1.";
    }

    function checkSelect(select){
    return (select.selectedIndex > 0);
    }

    non working dynamic code
    var jsCriteria = 3;

    for (var i=1; i <= jsCriteria; i++) {
    if ( !checkSelect(form.CriteriaID[i]) ) {
    errors[errors.length] = "You must answer Criteria [i].";
    }
    }
    function checkSelect(select){
    return (select.selectedIndex > 0);
    }

    I appreciate your help.

    Kev

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    As a best practice, I prefer to use the elements collection of a form object to refer to the input fields:
    Code:
    function checkSelect(select){
    	return (select.selectedIndex > 0);
    }
    
    for (var i = 0, length = form.elements.CriteriaID1.length; i < length; i++) {
    	if ( !checkSelect(form.elements.CriteriaID1[i]) ) {
    		errors.push("You must answer Criteria [" + i + "].");
    	}
    }
    Some more info: JavaScript, DOM, and the Humble FORM.

    Edit: Also, inside the if statement you referred to form.CriteriaID not form.CriteriaID1?

  3. #3
    Join Date
    Jun 2012
    Posts
    5
    Thanks! I think I see what you are saying...
    Last edited by kevhouston740; 06-14-2012 at 01:46 PM. Reason: I see what the were saying

  4. #4
    Join Date
    Jun 2012
    Posts
    5
    Your more info link helped a bit. I am getting a better understanding.

    CriteriaID1 is the hardcoded form element
    CriteriaID[i] is my attempt at refering to the form field dynamically.

    I want to reference the dynamically named selectbox form fields. The dynamic form fields are numbers I want to check form.CriteriaID1 see if it has a value if it doesn't add it to the list of errors. Then check the next dynamically named field named: form.CriteriaID2, etc. I was trying to use the variable [i] to identify the different form fields, like form.CriteriaID[i] where i is looping over the number of question per the users previous answer.

    I am successfully able to pass the jsCriterid value into the function.

    Here is what i now have:

    for (var i = 1; i <= jsCriteriaID; i++) {
    var zdrop = "form.CriteriaID" + i;
    if ( !checkSelect([zdrop]) ) {
    errors[errors.length] = "You must answer Criteria " + i;
    }
    }

    function checkSelect(select){
    alert( "here we go " + select);
    return (select.selectedIndex > 0);
    }

    I put the alert into the checkSelect () function to test the passed zdrop variable and it appears to pass correctly (Form.CriteriaID1 etc.) but it isn't running the checkSelect () function correctly or returning the expected value. Regardless if I answer 0 criteria, ALL criteria or any number in between it tells me I must review all of them.
    Last edited by kevhouston740; 06-14-2012 at 04:40 PM. Reason: lower case "f" on form.CriteriaID

  5. #5
    Join Date
    Jun 2012
    Posts
    5

    Solution

    Ok for those of you who might stumble upon this type of problem here is the solution that I came up with. toicontien's comment wasn't exactly correct, as written but his suggestion and the links to the other reference material that I read lead me on the correct path.

    for (var i = 1; i <= jsCriteriaCount; i++) {
    var zdrop = after.elements["CriteriaName" + i];
    if ( !checkSelect(zdrop) ) {
    errors[errors.length] = "You must answer Criteria " + i;
    }
    }

    The problem was with how I was trying to reference the document element(s). "after" is the name of my form.

    What I had reworked on my 3rd post lead me down a path that seemed like it would work, but ended up in 2 days of futility. While this is not completely dynamic just two modification (the form name and element name) and it will work on any page. IF you can add comments about how to make this drag and drop please feel free. I am always looking for better ways to do things.

    Kev

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    I would recommend renaming all the CriteriaName1...CriteriaNameN fields to just CriteriaName[]. That way the POST params that hit the backend script will already have an array to deal with, and you can reference them dynamically in JavaScript using:

    Code:
    after.elements["CriteriaName[]"]

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles