How to validate form in jQuery - Stack Overflow

admin管理员组

文章数量:1391974

I am trying to validate a form using jQuery, but I’m not sure how to properly implement validation for required fields, email format, and other constraints.

Here’s my current HTML form:

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

And my jQuery code so far:

$(document).ready(function () {
    $("#myForm").submit(function (event) {
        var name = $("#name").val();
        var email = $("#email").val();
        
        if (name.trim() === "") {
            alert("Name is required");
            event.preventDefault();
        }
        
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            alert("Invalid email address");
            event.preventDefault();
        }
    });
});

While this seems to work, I would like to know:

Is this the best way to validate a form using jQuery? Are there any improvements I can make to avoid repetitive event.preventDefault() calls? Should I consider using the jQuery Validation Plugin instead? Any guidance or best practices would be greatly appreciated!

I am trying to validate a form using jQuery, but I’m not sure how to properly implement validation for required fields, email format, and other constraints.

Here’s my current HTML form:

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

And my jQuery code so far:

$(document).ready(function () {
    $("#myForm").submit(function (event) {
        var name = $("#name").val();
        var email = $("#email").val();
        
        if (name.trim() === "") {
            alert("Name is required");
            event.preventDefault();
        }
        
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            alert("Invalid email address");
            event.preventDefault();
        }
    });
});

While this seems to work, I would like to know:

Is this the best way to validate a form using jQuery? Are there any improvements I can make to avoid repetitive event.preventDefault() calls? Should I consider using the jQuery Validation Plugin instead? Any guidance or best practices would be greatly appreciated!

• jquery

Share Improve this question Follow asked Mar 13 at 11:39 Mạnh Nguyễn ThiếtMạnh Nguyễn Thiết 111 silver badge11 bronze badge 1

• 1 Use this : jqueryvalidation./documentation – Death-is-the-real-truth Commented Mar 13 at 11:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

Why work so hard, you can get the desired results by adding html attributes, required, and set input to type email.

Your JS looks solid, but either way, remember to verify on server side as well, as all client side validaton can be disabled or bypassed.

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Submit</button>
</form>

本文标签： How to validate form in jQueryStack Overflow