Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to validate select elements?

    Dear All,
    I have a list of select elements? Any idea how to validate them using jquery?

  • #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by newbie14 View Post
    Dear All,
    I have a list of select elements? Any idea how to validate them using jquery?
    What kind of validation are you looking for?




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #3
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear ovTech,
    Here is my link http://183.78.169.54/v3/addRoute.php. First you could press the add button maybe twice or three time. Then when you press submit button is where I want the validation to work. I want to make sure each element of select input is select. I have used the method class='required' is not working. Any help please?

    Quote Originally Posted by oVTech View Post
    What kind of validation are you looking for?

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One way, with or without jquery, is something like this.

    1) When the submit button is clicked, loop through each row in the table.

    2) At each row, use getElementsByTagName() to get all the <select>s in that row.

    3) Loop through the <select>s in 2) and check that the selectedIndex of each is > 0

    Without jquery, it should be only a handful of lines of code.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Bullant,
    Here is my link http://183.78.169.54/v3/addRoute.php. First you can try to press the add button you will notice a new row of select box comes out. Now when you press submit is where I want to validate each row the select box should be selected. I have tried like this <select class='required' id='locationFrom[]' name='locationFrom[]' > but is not working. Any idea? So jquery will require more lines is it ?

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by newbie14 View Post
    So jquery will require more lines is it ?
    I did have a look at your website and saw how it works adding rows to the table.

    In my earlier post I just described how I would validate the <select>s without jquery. I'm not a huge user of jquery and so in this case I'm not sure how many lines it would take. But without jquery it shouldn't take many.

  • #7
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    Quote Originally Posted by newbie14 View Post
    Dear Bullant,
    Here is my link http://183.78.169.54/v3/addRoute.php. First you can try to press the add button you will notice a new row of select box comes out. Now when you press submit is where I want to validate each row the select box should be selected. I have tried like this <select class='required' id='locationFrom[]' name='locationFrom[]' > but is not working. Any idea? So jquery will require more lines is it ?
    You are using a jQuery plugin, so you should check their docs here:
    http://docs.jquery.com/Plugins/Validation
    http://bassistance.de/jquery-plugins...in-validation/




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • #8
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Ovtech,
    I have some codes as you see in my function. I have also tried like this below but that is not function either. So I am stuck here.

    Code:
    $('td:not(:first) select',form).each(function () {
                        $(this).rules('add', {required: true});
                    });*/
    Code:
    function setupFormValidation(form) {
                   // $(form).validate().resetForm();
                    /*if ($('tbody tr', form).length < 2) {
                    	  alert("Must Have End Destination Route");
                    }*/
                    
                   /*$('td:not(:first) select',form).each(function () {
                        $(this).rules('add', {required: true});
                    });*/
                    /*
                    $('td:not(:first) select',form).each(function () {
                        $(this).rules('add', {required: true});
                    });*/
                   
                }

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Bullant,
    How will you validate without jquery? Can you show me some coding snippet? Thank you.
    Quote Originally Posted by bullant View Post
    I did have a look at your website and saw how it works adding rows to the table.

    In my earlier post I just described how I would validate the <select>s without jquery. I'm not a huge user of jquery and so in this case I'm not sure how many lines it would take. But without jquery it shouldn't take many.

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Let's say your Add button generates rows in the DOM similar to the ones in the demo below.

    When you click the Submit button, the cells containing invalid selections in their <select>s will have a red background colour.

    You can add as many rows and <select>s to each row as you like without having to touch the javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                function validateForm(){
                    tbodyInputsO = document.getElementById('tbodyInputs');
                    var isDataValid = true;
                    for(i=0; i < tbodyInputsO.rows.length; i++){
                        var selO = tbodyInputsO.rows[i].getElementsByTagName('select');
                        for(j=0; j < selO.length; j++){
                            selO[j].parentNode.style.backgroundColor = 'white';
                            if(selO[j].selectedIndex == 0){
                                selO[j].parentNode.style.backgroundColor = 'red';
                                isDataValid = false;
                            }
                        }
                    }
                    if(!isDataValid){
                        alert('Red cells have invalid selections');
                    }
                    return isDataValid;
                }
            </script>
        </head>
        <body>
            <form action="" method="post" onsubmit=" return validateForm();">
                <table id="tbl1" cellspacing="5" cellpadding="3" border="1">
                    <tbody id="tbodyInputs">
                        <tr>
                            <td>
                                <select name="selFrom[]">
                                    <option value="" selected="selected">Select From Location</option>
                                    <option value="from_1">From 1</option>
                                    <option value="from_2">From 2</option>
                                </select>
                            </td>
                            <td>
                                <select name="selTo[]">
                                    <option value="" selected="selected">Select To Location</option>
                                    <option value="from_1">To 1</option>
                                    <option value="from_2">To 2</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select name="selFrom[]">
                                    <option value="">Select From Location</option>
                                    <option value="from_1">From 1</option>
                                    <option value="from_2">From 2</option>
                                </select>
                            </td>
                            <td>
                                <select name="selTo[]">
                                    <option value="">Select To Location</option>
                                    <option value="from_1">To 1</option>
                                    <option value="from_2">To 2</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div>
                    <input type="submit" value="Submit" />
                </div>
            </form>
        </body>
    </html>
    Last edited by bullant; 05-16-2011 at 05:24 AM.

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Bullant,
    Is is possible to have error message below the select box. Another thing do you think I can use the jquery to build the dynamic select box rows and validate it via javascript which you have suggested? Will there be any conflict?
    Quote Originally Posted by bullant View Post
    Let's say your Add button generates rows in the DOM similar to the ones in the demo below.

    When you click the Submit button, the cells containing invalid selections in their <select>s will have a red background colour.

    You can add as many rows and <select>s to each row as you like without having to touch the javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
            function validateForm(){
                tbodyInputsO = document.getElementById('tbodyInputs');
                isDataValid = true;
                for(i=0; i < tbodyInputsO.rows.length; i++){
                     var selO = tbodyInputsO.rows[i].getElementsByTagName('select');
                    for(j=0; j < selO.length; j++){
                        selO[j].parentNode.style.backgroundColor = 'white';
                        if(selO[j].selectedIndex == 0){
                            selO[j].parentNode.style.backgroundColor = 'red';
                            isDataValid = false;
                        }
                    }
                }
                if(!isDataValid){
                    alert('Red cells have invalid selections');
                }
                return isDataValid;
            }
            </script>
        </head>
        <body>
            <form action="" method="post" onsubmit=" return validateForm();">
                <table id="tbl1" cellspacing="5" cellpadding="3" border="1">
                    <tbody id="tbodyInputs">
                        <tr>
                            <td>
                                <select name="selFrom[]">
                                    <option value="" selected="selected">Select From Location</option>
                                    <option value="from_1">From 1</option>
                                    <option value="from_2">From 2</option>
                                </select>
                            </td>
                            <td>
                                <select name="selTo[]">
                                    <option value="" selected="selected">Select To Location</option>
                                    <option value="from_1">To 1</option>
                                    <option value="from_2">To 2</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select name="selFrom[]">
                                    <option value="">Select From Location</option>
                                    <option value="from_1">From 1</option>
                                    <option value="from_2">From 2</option>
                                </select>
                            </td>
                            <td>
                                <select name="selTo[]">
                                    <option value="">Select To Location</option>
                                    <option value="from_1">To 1</option>
                                    <option value="from_2">To 2</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div>
                    <input type="submit" value="Submit" />
                </div>
            </form>
        </body>
    </html>

  • #12
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by newbie14 View Post
    Dear Bullant,
    Is is possible to have error message below the select box.
    Yes, that's no problem. You can either have the messages below the select box hidden by default and unhide them if the selection is invalid or you can create the error messages and their containers dynamically if the selection is invalid and append the error message container to the select box's <td>

    Just make sure every time validateForm() is called, the error messages are not visible or do not exist, depending on which method to display them you use.

    Quote Originally Posted by newbie14 View Post
    Another thing do you think I can use the jquery to build the dynamic select box rows and validate it via javascript which you have suggested? Will there be any conflict?
    There shouldn't be any conflict if coded correctly. Bear in mind that jquery is not a new or different language. It's just a bunch of prewritten javascript code. There is nothing in jquery that you cannot do with just plain javascript.

  • #13
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Bullant,
    Actually I am quite lost with this jquery.So when you said is prewritten javascript means we just call and use it is it? So once I have created the table and its row how via javascript I can add the message below the select box is that possible? How to do this "validateForm() is called, the error messages are not visible or do not exist, depending on which method to display them you use". I am bit confuse.


    Quote Originally Posted by bullant View Post
    Yes, that's no problem. You can either have the messages below the select box hidden by default and unhide them if the selection is invalid or you can create the error messages and their containers dynamically if the selection is invalid and append the error message container to the select box's <td>

    Just make sure every time validateForm() is called, the error messages are not visible or do not exist, depending on which method to display them you use.



    There shouldn't be any conflict if coded correctly. Bear in mind that jquery is not a new or different language. It's just a bunch of prewritten javascript code. There is nothing in jquery that you cannot do with just plain javascript.

  • #14
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    It sounds like you are trying to run before you can walk. Maybe first work through the w3schools javascript tutorials to learn the basics before playing with jquery.

    Many people try to take the shortcut of using jquery without at least a basic understanding of the fundamentals of javascript and they consequently then keep running into problems or dead ends.

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Bullant,
    Sorry cause I have like wasted a lot of time first with javascript so where I was trying to build the dynamic row of the select boxes. I could not do it well that is where I switch to jquery and like you said I end of up having problem validating it.
    Quote Originally Posted by bullant View Post
    It sounds like you are trying to run before you can walk. Maybe first work through the w3schools javascript tutorials to learn the basics before playing with jquery.

    Many people try to take the shortcut of using jquery without at least a basic understanding of the fundamentals of javascript and they consequently then keep running into problems or dead ends.


  •  

    Posting Permissions

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