Golang React JS Technology Blog

jQuery simple form with name and email validations

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script>
$(document).ready(function () {
    $("#form").validate({
        rules: {
            "name": {
                required: true,
                minlength: 5
            },
            "email": {
                required: true,
                email: true
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "email": {
                required: "Please, enter an email",
                email: "Email is invalid"
            }
        },
        submitHandler: function (form) {
            alert('Form Pass All Validations');
            return false;
        }
    });

});
</script>
</head>
<body>
<form id="form" method="post" action="#">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" />
    <button type="submit">Submit</button>
</form>
</body>
</html>
Most Helpful This Week
How to the length of the longest word in the provided sentence? JavaScript check if first string contains all characters of second string jQuery Show or Hide text on button click Highlight and get the details of table row on click using JavaScript JavaScript calculate Fahrenheit from Celsius jQuery example of scroll to top