Validate form in Javascript

Question

i got a problem with my Order form. I need to validate some of the fields, checkboxs, dropdown list, and the quantity of the products. So i just started with the checkbox. It have to looks like: If i check the box, but not specify the quantity of the product, its popup a javascript alert that tell me to specify how much i want to order from that product. And if i dont check the checkbox its start alert me with that. Second, i need to Validate the card number for: Only number and 20 character with - after every 4 digits. Just done with the checkbox validate but cant even done the quantity validate and the card number, card type validate.

<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>Order</title>

<script language="javascript">
function validateFunction() {
var fo = document.cardform;
if (!fo.field1.checked && !fo.field2.checked && !fo.field3.checked) {
      alert("Must choose at least one thing to buy");
      return false;
}
return true;
}
</script>

</head>

<body>
    <h2>
        <strong>
            Order
        </strong>
    </h2>
    <form name="cardform" action="" onsubmit="return validateFunction();">
    Name: <input type="text" name="name" size="40px" required> </br>
    Adress: <input type="text" name="adress" size="40px" required> </br>
    Card Type: <select name="card" form="cardform" required>
                    <option value="choose" selected>Please Choose</option>
                    <option value="visa">Visa</option>
                    <option value="americanexpress">American Express</option>
                    <option value="mastercard">Master Card</option>
                    <option value="maestro">Maestro</option>
</select>
    Cardnumber: <input type="number" name="cardnumber" required> </br>
    <table border="1px">
        <tr>
            <td>
            name:
            </td>
            <td>
            price:
            </td>
            <td>
            q:
            </td>
        </tr>
        <tr>
            <td>
            <input type="checkbox" name="field1">1
            </td>
            <td>
            13
            </td>
            <td>
            <input type="text" name="1q">
            </td>
        </tr>
        <tr>
            <td>
            <input type="checkbox" name="field2">2
            </td>
            <td>
            133
            </td>
            <td>
            <input type="text" name="2q">
            </td>
        </tr>
        <tr>
            <td>
            <input type="checkbox" name="field3">3
            </td>
            <td>
            1337
            </td>
            <td>
            <input type="text" name="3q">
            </td>
        </tr>
    </table>    
    Comment: </br>
    <textarea name="comments" cols="25" rows="5"> Comment here </textarea> </br>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>

</body>
</html>

What exactly is your question? – dezman May 17 '13 at 21:22 — dezman, May 17 '13 at 21:22

score 0 · Answer 1 · answered May 17 '13 at 21:23

0

It is a bit unclear what you are asking exactly, but it sounds like you are looking for some general advice on form validation.

I would suggest using jQuery and then use jQuery Validate.

Check the documentation and lots of examples here.

Basically what it lets you do is to decorate your HTML tags with attributes that tell jQuery Validate how that tag, be it a checkbox or an input field, should be validated.

answered May 17 '13 at 21:23

AndersDaniel

1,152
9
20

Download this Jquery validate, and i have to say its really awesome. Just done with the name, adress, and card type fields. But i dont know how to validate the checkboxes with this. (If a user doesn't check a box, it should become red. If the user check it, but doesn't write value inside Quantity field its also become red. I also need to card number field to can only input numbers and - character. – Sqveeze May 20 '13 at 10:09
For the numbers and characters you can write a regular expression validation. I'm no expert on RegEx, but take a look at [this](http://stackoverflow.com/questions/280759/jquery-validate-how-to-add-a-rule-for-regular-expression-validation) SO question for help. I'm not sure what you mean about the checkbox, can you elaborate on that? – AndersDaniel May 21 '13 at 06:22

score 0 · Answer 2 · answered May 18 '13 at 06:29

0

In my view " there was some required attribute for fields" if field are empty it is aborting next level ( i mean your alert message). try with removing required attribute and write validation for remaining fields using js/jquery. Hope it works .

answered May 18 '13 at 06:29

Ramalinga Raju

47
1
6

Validate form in Javascript

2 Answers2