Reputation: 157

validation messages are appearing on multiple time on button click in

I have made landing page and using jquery after() method for showing validation messages. When User click multiple times validation messages getting appended and input boxes getting out of form clicks after clicks. When I use append() over after() it does not shows validation error messages at all. What can I use methods for showing validation messages? or Do I need to do with fixed height width of form or is there is huge mistake I have done? Thanks. Validation error messages

Form

        <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12 " id="e_form">
            <h2>Enquiry Form</h2>
            <form name="enquiry-form" method="post" action="#" id="enquiry-form" novalidate="">
                <div class="form-group">
                    <input type="text" class="form-control input-height" name="name" id="name" placeholder="Enter your name here" required="required">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control input-height" name="email" id="email" placeholder="Enter your Email-ID" required="required">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-height" name="number" id="phone" placeholder=" Enter your Mobile Number" required="required" maxlength="10">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-height" name="city" id="city" placeholder="Enter your city" required="required">
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="4" name="details" id="details" placeholder="Enter message here" required="required"></textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default btn-lg" name="Submit" id="submit" onclick="CheckBlank(event)">Get Started</button>
                </div>
            </form>
        </div>

Jquery Validation

    <script>


 function CheckBlank(e) {
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        var phone = $('#phone').val();
        var city = $('#city').val();
        var details = $('#details').val();

        if (name === "" && email === "" && phone === "" && city === "" && details === "") {
           // $('input,textarea').css("border", "1px solid red");
            $("#name").after("<div class='validation' style='color:red;'>Please Enter Your Name</div>");
            $("#email").after("<div class='validation' style='color:red;'>Please Enter Your Email ID</div>");
            $("#phone").after("<div class='validation' style='color:red;'>Please Enter Your Phone Number</div>");
            $("#city").after("<div class='validation' style='color:red;'>Please Enter Your City</div>");
            $("#details").after("<div class='validation' style='color:red;'>Please Enter Your Message</div>");
          //  $("#submit").prop("disabled",true);
        } 
        else if (name === "" || email === "" || phone === "" || city === "" || details === "") {
            $("#submit").prop('disabled',false);
            $('#name').val() !== '' ? $('#name').css("border", "none") && $('.validation').remove() :
                $("#name").after("<div class='validation' style='color:red;'>Please Enter Your Name</div>");

            $('#email').val() !== '' &&  !ValidateEmail($("#email").val()) ? $('#email').css("border", "none") && $('.validation').remove() :
                $("#email").after("<div class='validation' style='color:red;'>Please Enter Your Email ID</div>");

            $('#phone').val() !== '' ? $('#phone').css("border", "none") && $('.validation').remove() && $('.valid-email').remove():
                $("#phone").after("<div class='validation' style='color:red;'>Please Enter Your Phone Number</div>");

            $('#city').val() !== '' ? $('#city').css("border", "none") && $('.validation').remove() :
                $("#city").after("<div class='validation' style='color:red;'>Please Enter Your city</div>");

            $('#details').val() !== '' ? $('#details').css("border", "none") && $('.validation').remove() :
                $("#details").after("<div class='validation' style='color:red;'>Please Enter Your Message</div>");

        } 
        else {
            $("#submit").after("<div class='greeting' style='color:#3b9a80;'>Thank You !! We Will Contact You Within 24 Hours  !!</div>");
            $('input,textarea').val("");
            $("#submit").prop('disabled',false);
            $('.validation').remove();
            $(".greeting").fadeOut(5000);    
        }
    }

    $("#name,#email,#phone,#city,#details").on("keydown", function(e) {
    if  (e.which == 9) {  // tab key press 
            $('#name').val() !== '' ? $('#name').css("border", "none") && $('.validation').remove() :
                $("#name").after("<div class='validation' style='color:red;'>Please Enter Your Name</div>");

            $('#email').val() !== '' && !ValidateEmail($("#email").val()) ? $('#email').css("border", "none") && $('.validation').remove() && $('.valid-email').remove():
                $("#email").after("<div class='validation' style='color:red;'>Please Enter Your Email ID</div>");

            $('#phone').val() !== '' ? $('#phone').css("border", "none") && $('.validation').remove() && $('.valid-phone').remove():
                $("#phone").after("<div class='validation' style='color:red;'>Please Enter Your Phone Number</div>");

            $('#city').val() !== '' ? $('#city').css("border", "none") && $('.validation').remove() :
                $("#city").after("<div class='validation' style='color:red;'>Please Enter Your city</div>");

            $('#details').val() !== '' ? $('#details').css("border", "none") && $('.validation').remove() :
                $("#details").after("<div class='validation' style='color:red;'>Please Enter Your Message</div>");
        }
    });


    $("#name,#city").on("keypress", function(e) {
        var regex = /^[a-zA-Z ]*$/;  // prevent pressing numbers and other symbols
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        } else {
            e.preventDefault();
            return false;
        }
    });


    $("#phone").on("change", function(e) {
        if ($("#phone").val().length != 10)  {
            $("#phone").append("<div class='valid-phone' style='color:red;'>Please Enter Valid Phone Number</div>"); 
        }
        else{
            $('.valid-phone').remove();
        }         
    });

    $('#phone').keypress(function(key) {
        if (key.charCode < 48 || key.charCode > 57) return false; // prevent pressing other than numbers
    });


    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    }

    $("#email").on("change", function() {
        if (!ValidateEmail($("#email").val())) {
            $('.validation').remove();
            $("#email").append("<div class='valid-email' style='color:red;'>Please Enter Valid Email ID</div>");
        } else {
            $('.valid-email').remove();
            return;
        }
    });


    $("#phone,#email,#phone,#city").on({
        keydown: function(e) {
            if (e.which === 32)  // prevent pressing space bar 
                return false;
        },
        change: function() {
            this.value = this.value.replace(/\s/g, "");
        }
    });
    </script>

Upvotes: 3

Answers (2)

Narendra Selot

Reputation: 24

Just add $('div.validation').remove(); in the CheckBlank(e) method JSFiddle : https://jsfiddle.net/44Luvysr/11/

Upvotes: 0

Aswin

Reputation: 147

If you want to continue with this procedure, it is pretty hard to handle, when you go with increasing form size. I would suggest you to add span elements of error message container with form input and handle the content alone with validation.

<form id="loginform" name="loginform" action="myurl.com" method="post">
<input type="text" name="username" /><span id="usernameError"></span>
<input type="password" name="password" /><span id="passwordError"></span>
<input type="submit" value="Submit" /></form>

And js code will be like

function handleinput(){
if(document.loginform.username.value == ""){
document.getElementById("usernameError").innerHTML = "You must enter a username";
return false;}
if(document.loginform.password.value == ""){    document.getElementById("passwordError").innerHTML = "You must enter a password";
return false;}}

This span will act as a container of error messages and we can have better control over error messages with the help of JavaScript

Upvotes: 2

validation messages are appearing on multiple time on button click in

Answers (2)

Related Questions