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
jQuery example of scroll to top How to scroll page to 1000px from top on page load using jQuery? Write a function that splits an array into groups the length of size and returns them as a two-dimensional array How to current URL, HOST and URL attributes using JavaScript or jQuery? Highlight and get the details of table row on click using JavaScript How to check if an element or HTML tag exists using JavaScript?