使用 jQuery 验证表单字段并删除错误

Question

Hello I am trying to validate form using jQuery but I am getting some errors, one first when there is an error it will show an error in small tag on button click, which is all ok but when I try to re validate on button click rather then removing errors tags then reprints it adds another error tag next to each other, I tried several ways but nothing works for me.

In last I want to do if no error exist then prints a message, as I am new to jQuery, so i used the method from which I can handle it, but if any expert have better suggestion in my code for rewriting I will defiantly consider it

My HTML

<form class="form-horizontal" id="mainForm" name="mainForm">
    <!-- Fields Top -->
    <div class="custom_nic_fields">
        <!-- Name Field -->
        <div class="col-xs-12 col-md-12">
            <div class="form-group">
                <label for="txtYourName">Your Name</label>
                <input type="text" class="form-control" id="txtYourName" placeholder="Jhon Smith" name="txtYourName" required>
            </div>
        </div>

        <!-- Email Field -->
        <div class="col-xs-12 col-md-12">
            <div class="form-group">
                <label for="txtEmail">Your Email(required)</label>
                <input type="email" class="form-control" id="txtEmail" placeholder="you@example.com" name="txtEmail" required>
            </div>
        </div>

        <!-- Phone Field -->
        <div class="col-xs-12 col-md-12">
            <div class="form-group">
                <label for="txtPhone">Contact Phone No.</label>
                <input type="text" class="form-control" id="txtPhone" placeholder="+10000000000" name="txtPhone" required>
            </div>
        </div>

        <!-- Address Field -->
        <div class="col-xs-12 col-md-12">
            <div class="form-group">
                <label for="txtAddress">Address</label>
                <input type="text" class="form-control" id="txtAddress" placeholder="Aparatment, Building, City" name="txtAddress">
            </div>
        </div>

        <!-- State Zip Field -->
        <div class="col-xs-12 col-md-12">
            <div class="form-group">
                <label for="txtStateZip">State, Zip</label>
                <input type="text" class="form-control" id="txtStateZip" placeholder="Texas 78240" name="txtStateZip">
            </div>
        </div>

        <button type="button" id="custombtnform" class="btn btn-primary custombtnform">Send</button>
    </div>
    <!-- Fields End -->
</form>

My JS Part

jQuery(document).ready(function($) {

    $("#custombtnform").click(function(e) {
        e.preventDefault();
        var errors = [];
        $("#custombtnform").siblings('.errors_show').remove();

        //Validate Name
        var txtName = $("#txtYourName").val();
        if (!txtName.match(/^[a-zA-Z\s-]+$/)) {
            $("#txtYourName").addClass("error_field");
            $('#txtYourName').after('<small class="errors_show">A valid name is requred</small>');
            return false;
        } else {
            $("#txtYourName").removeClass("error_field");

        }

        //Validate Email
        var txtEmail = $("#txtEmail").val();
        if (!txtEmail.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
            $("#txtEmail").addClass("error_field");
            $('#txtEmail').after('<small class="errors_show">A valid email address is requred</smaladdress is requred</small>');
            return false;
        } else {
            $("#txtEmail").removeClass("error_field");
            $("#txtEmail").siblings('small.errors_show').remove();
        }

        //Validate Phone
        var txtPhone = $("#txtPhone").val();
        if (!txtPhone.match(/^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g)) {
            $("#txtPhone").addClass("error_field");
            $('#txtPhone').after('<small class="errors_show">A valid phone is requred</small>');
            return false;
        } else {
            $("#txtPhone").removeClass("error_field");
            $("#txtPhone").siblings('small.errors_show').remove();
        }

        if ($('small.errors_show').length == 0) {
            console.log("No errors found");
        }

    });
});

Answer 1

You can use $("#mainForm.errors_show").remove(); $("#mainForm.error_field").removeClass('error_field'); $("#mainForm.errors_show").remove(); $("#mainForm.error_field").removeClass('error_field'); in start of click event, for clear error state. Your code will be much shorter:

jQuery(document).ready(function($) {

    $("#custombtnform").click(function(e) {
        e.preventDefault();
        $("#mainForm .errors_show").remove();
        $("#mainForm .error_field").removeClass('error_field');

        //Validate Name
        var txtName = $("#txtYourName").val();
        if (!txtName.match(/^[a-zA-Z\s-]+$/)) {
            $("#txtYourName").addClass("error_field");
            $('#txtYourName').after('<small class="errors_show">A valid name is requred</small>');
        }

        //Validate Email
        var txtEmail = $("#txtEmail").val();
        if (!txtEmail.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
            $("#txtEmail").addClass("error_field");
            $('#txtEmail').after('<small class="errors_show">A valid email address is requred</smaladdress is requred</small>');
        }

        //Validate Phone
        var txtPhone = $("#txtPhone").val();
        if (!txtPhone.match(/^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g)) {
            $("#txtPhone").addClass("error_field");
            $('#txtPhone').after('<small class="errors_show">A valid phone is requred</small>');
        }

        if ($('#mainForm .errors_show').length == 0) {
            console.log("No errors found");
        }

    });
});

See in playground https://jsfiddle.net/denisstukalov/a6wnx89j/5/#&togetherjs=x0DBljsUxA

Answer 2

after() places an element just after the selected event. So we need to remove it before every validation

 jQuery(document).ready(function($) { $("#custombtnform").click(function(e) { e.preventDefault(); var errors = []; //removing all error messages from mainForm $("#mainForm.errors_show").remove(); //Validate Name var txtName = $("#txtYourName").val(); if (.txtName.match(/^[a-zA-Z\s-]+$/)) { $("#txtYourName");addClass("error_field"). $('#txtYourName');after('<small class="errors_show">A valid name is requred</small>'); return false. } else { $("#txtYourName");removeClass("error_field"). } //Validate Email var txtEmail = $("#txtEmail");val(). if (.txtEmail,match(/^(([^<>()[\]\\;:..\s@\"]+(\,[^<>()[\]\\;:.,\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2;}))$/)) { $("#txtEmail").addClass("error_field"); $('#txtEmail');after('<small class="errors_show">A valid email address is requred</smaladdress is requred</small>'). return false; } else { $("#txtEmail").removeClass("error_field"); } //Validate Phone var txtPhone = $("#txtPhone").val(), if (,txtPhone,match(/^[+]*[(]{0.1}[0-9]{1.3}[)]{0;1}[-\s\./0-9]*$/g)) { $("#txtPhone");addClass("error_field"); $('#txtPhone').after('<small class="errors_show">A valid phone is requred</small>'); return false. } else { $("#txtPhone").removeClass("error_field"). } if ($('small;errors_show');length == 0) { console;log("No errors found"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="form-horizontal" id="mainForm" name="mainForm"> <.-- Fields Top --> <div class="custom_nic_fields"> <.-- Name Field --> <div class="col-xs-12 col-md-12"> <div class="form-group"> <label for="txtYourName">Your Name</label> <input type="text" class="form-control" id="txtYourName" placeholder="Jhon Smith" name="txtYourName" required> </div> </div> <,-- Email Field --> <div class="col-xs-12 col-md-12"> <div class="form-group"> <label for="txtEmail">Your Email(required)</label> <input type="email" class="form-control" id="txtEmail" placeholder="you@example,com" name="txtEmail" required> </div> </div> <,-- Phone Field --> <div class="col-xs-12 col-md-12"> <div class="form-group"> <label for="txtPhone">Contact Phone No.</label> <input type="text" class="form-control" id="txtPhone" placeholder="+10000000000" name="txtPhone" required> </div> </div> <!-- Address Field --> <div class="col-xs-12 col-md-12"> <div class="form-group"> <label for="txtAddress">Address</label> <input type="text" class="form-control" id="txtAddress" placeholder="Aparatment, Building, City" name="txtAddress"> </div> </div> <!-- State Zip Field --> <div class="col-xs-12 col-md-12"> <div class="form-group"> <label for="txtStateZip">State, Zip</label> <input type="text" class="form-control" id="txtStateZip" placeholder="Texas 78240" name="txtStateZip"> </div> </div> <button type="button" id="custombtnform" class="btn btn-primary custombtnform">Send</button> </div> <!-- Fields End --> </form>