How to validate select elements?

newbie14 · 05-15-2011, 05:53 PM

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

oVTech · 05-15-2011, 06:00 PM

Quote:

Originally Posted by newbie14

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?

newbie14 · 05-15-2011, 06:27 PM

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

What kind of validation are you looking for?

bullant · 05-16-2011, 12:29 AM

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.

newbie14 · 05-16-2011, 02:17 AM

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 ?

bullant · 05-16-2011, 02:27 AM

Quote:

Originally Posted by newbie14

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.

oVTech · 05-16-2011, 02:53 AM

Quote:

Originally Posted by newbie14

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/

newbie14 · 05-16-2011, 03:16 AM

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});
                });*/
               
            }

newbie14 · 05-16-2011, 03:17 AM

Dear Bullant,
How will you validate without jquery? Can you show me some coding snippet? Thank you.

Quote:

Originally Posted by bullant

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.

bullant · 05-16-2011, 03:55 AM

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>

newbie14 · 05-16-2011, 04:03 AM

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

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>

bullant · 05-16-2011, 04:21 AM

Quote:

Originally Posted by newbie14

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

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.

newbie14 · 05-16-2011, 04:42 AM

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

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.

bullant · 05-16-2011, 05:10 AM

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.

newbie14 · 05-16-2011, 05:19 AM

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

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.