CODEWITHSUNDEEP
javascript
Brajman
Brajman

Reputation: 307

Validate form fields and remove error using jQuery

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="[email protected]" 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");
        }

    });
});

Upvotes: 0

Views: 65

Answers (2)

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

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="[email protected]" 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>

Upvotes: 0

Denis Stukalov
Denis Stukalov

Reputation: 1242

You can use $("#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

Upvotes: 1

Related Questions