Question

I have a form which has 4 columns and the user can dynamically add or delete rows.
Now I tried to validate this through javascript following code:-

<script type="text/javascript">
function chkempty()
        {


    var x=document.forms["main"]["qty[]"].value
    var y=document.forms["main"]["price[]"].value
    var z=document.forms["main"]["item[]"].value
    if (x==null || x=="")   {
                            alert("Quantity must be filled out");
                            return false;
                            }
    if (y==null || y=="")   {
                            alert("Price must be filled out");
                            return false;
                            }
    if (z==null || z=="")   {
                            alert("Itemcode cannot be empty");
                            return false;
                            }   
        }

It works for the first row but when the user selects more than one row, even after filling up values, he is getting the validation error message. can someone help me with this please?
Thanks and keep smiling.

Answer 1

VERY simple solution here:

Use Jquery Inline Validator

When you add new lines of content to the table, simply ensure that you have the proper class defined (such as class="validate[required,custom[email]]" ) to ensure that it will validate the field correctly as you wish. I often just do the required element, but the example I gave above also does email format checking. There are additional built in checkers for phone numbers, currency, etc.

If the user messes up an input, it will display a visually appealing tooltip like dialog next to the field with the error.

Done. Simple. Clean. Fast.

None of these solutions make up for the fact that you really need to sanitize on the server-side as well. Any Javascript can be bypassed, so it’s not 100% guaranteed to be safe or accurate. But it is a good start and provides quality, instant feedback to the user.