Web Tech: Simple Jquery Validation Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>



<title>Form Validation using jQuery - Demo</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">
        SubmittingForm=function() {
            alert("The form has been validated.");
        }

        $(document).ready(function() {
            $("#fvujq-form1").validate({
                submitHandler:function(form) {
                    SubmittingForm();
                },
                rules: {
                    name: "required",        // simple rule, converted to {required:true}
                    email: {                // compound rule
                        required: true,
                        email: true
                    },
                    url: {
                        url: true
                    },
                    comment: {
                        required: true
                    }
                },
                messages: {
                    comment: "Please enter a comment."
                }
            });
        });

        jQuery.validator.addMethod(
            "selectNone",
            function(value, element) {
                if (element.value == "none")
                {
                    return false;
                }
                else return true;
            },
            "Please select an option."
        );

        $(document).ready(function() {
            $("#fvujq-form2").validate({
                submitHandler:function(form) {
                    SubmittingForm();
                },
                rules: {
                    sport: {
                        selectNone: true
                    }
                }
            });
        });
    </script>

    <style type="text/css">
.form-div {
border: 1px #ccc solid;
padding: 10px;
width: 650px;
}

.form-div .submit {
margin-left: 155px;
margin-top: 10px;
}

.form-div .label {
display: block;
float: left;
width: 150px;
text-align: right;
margin-right: 5px;
}

.form-div .form-row {
padding: 5px 0;
clear: both;
width: 700px;
}

.form-div label.error {
width: 250px;
display: block;
float: left;
color: red;
padding-left: 10px;
}

.form-div input[type=text], select, textarea {
width: 250px;
float: left;
}

.form-div textarea {
height: 50px;
}
    </style>

</head>

<body>

<div class="form-div">
     <form id="fvujq-form1" method="post" action="">
        <div class="form-row">
      <span class="label">Name *</span>
      <input type="text" name="name">
        </div>
        <div class="form-row">
      <span class="label">E-Mail *</span>
      <input type="text" name="email">
        </div>
        <div class="form-row">
      <span class="label">URL   </span>
      <input type="text" name="url">
        </div>
        <div class="form-row">
      <span class="label">Your comment *</span>
      <textarea name="comment"></textarea>
        </div>
        <div class="form-row">
      <input class="submit" type="submit" value="Submit">
        </div>
     </form>
</div>


</body>
</html>

Run the demo:

http://webonthego.blogspot.in/2012/12/demo.html

Web Tech

Friday 7 December 2012

Simple Jquery Validation Example

No comments:

Post a Comment