CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   How to validate select elements? (http://www.codingforums.com/showthread.php?t=226942)

newbie14 05-15-2011 05:53 PM
How to validate select elements?
 
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 (Post 1090860)
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 (Post 1090863)
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 (Post 1090945)
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 (Post 1090945)
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 (Post 1090947)
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 (Post 1090968)
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 (Post 1090969)
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 (Post 1090969)
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 (Post 1090972)
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 (Post 1090974)
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.


All times are GMT +1. The time now is 05:30 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.