Click here to Skip to main content
15,035,723 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
<form class="form-container" onsubmit="return false" autocomplete="off" novalidate>
             <fieldset><h4 class ="text-center font-weight-bold ">Personal Information</h4></fieldset>

             <!-- ALERT FOR DUPLICATE AND SUCCESS -->
        <div class="form-group col-12 container">
            <div class="alert" id="alertMessage" role="alert" hidden>
                 <h6 class="alert-heading" id="alertHeading"></h6>
                <p id="sampleParagraph" class="text-center"></p>
                <a href="#" id="hrefText"></a>
            </div>
        </div>


       <div class="form-row">
           <div class="form-group col-xs-12 col-md-4">
               <label for="inputEmail4">First Name</label>
               <input type="text" class="form-control" id="txtFirstname" placeholder="" pattern=".{3,}" title="3 characters minimum" aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback">
                           Required Field.
                    </div>
           </div>

           <div class="form-group col-xs-12 col-md-4">
                <label for="inputPassword4">Middle Name</label>
               <input type="text" class="form-control" id="txtMiddlename" placeholder=""  aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback">
                           Required Field.
                    </div>
           </div>
           <div class="form-group col-xs-12 col-md-4">
               <label for="inputEmail4">Last Name</label>
               <input type="text" class="form-control" id="txtLastname" placeholder="" pattern=".{3,}" title="3 characters minimum" aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback">
                           Required Field.
                    </div>
           </div>
       </div>


       <div class ="form-row">
       <div class="form-group col-12 col-md-8">
           <label for="inputAddress">Address</label>
            <input type="text" class="form-control" id="txtaddress" placeholder=""  aria-describedby="inputGroupPrepend" required>
           <div class="invalid-feedback">
                           Required Field
           </div>
       </div>

       <div class="form-group col-12 col-md-4">
           <label for="inputAddress2">City</label>
           <input type="text" class="form-control" id="txtcity" placeholder="" aria-describedby="inputGroupPrepend" required>
           <div class="invalid-feedback">
                           Required Field
           </div>
       </div>
           </div>


       <div class="form-row">
           <div class="form-group col-12 col-md-4">
               <label for="inputEmail4">Birthdate</label>
               <input type="text" class="form-control" id="txtbirthday" placeholder="" onkeypress="return false;" required>
               <!--<label id ="lblerrorbd" class="text-center" style="color:red; font-size:smaller;"></label>-->
               <div class="invalid-feedback">
                           Required Field
               </div>
                   <div class="input-group-addon">
                       <span class="glyphicon glyphicon-calendar"></span>
                   </div>
           </div>

           <div class="form-group col-12 col-md-4">
                <label for="inputPassword4">Mobile Number</label>
               <input type="text" class="form-control" id="txtmobilenumber" maxlength="11" placeholder="" value="09" pattern=".{11,}" title="Please input correct mobile number" onkeydown = "return (!(event.keyCode>=65) && event.keyCode!=32);" aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback">
                           Invalid Number.
                    </div>
           </div>
           <div class="form-group col-12 col-md-4">
               <label for="inputEmail4">Phone Number</label>
               <input type="text" class="form-control" id="txtphonenumber" maxlength="7" placeholder="" onkeydown = "return (!(event.keyCode>=65) && event.keyCode!=32);" aria-describedby="inputGroupPrepend">
           </div>
       </div>
       <h4 class ="text-center font-weight-bold">Account Information</h4>




           <div class="form-group col-12 col-md-8 center-block">
               <label for="inputEmail4">Email</label>
               <input type="email" class="form-control" id="txtemail" placeholder="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="email must be in correct format" aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback" id="emailRequired">
                           Required Field.
                    </div>
           </div>

           <div class="form-group col-12 col-md-8 center-block">
               <label for="inputEmail4">Password</label>
               <input type="password" class="form-control" id="txtpassword" placeholder="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password minimum of 8 characters" onchange='check_pass();' aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback" id="passRequired">
                           Required Field
                    </div>
           </div>

           <div class="form-group col-12 col-md-8 center-block">
               <label for="inputEmail4">Confirm Password</label>
               <input type="password" class="form-control" id="txtconfirmpassword" placeholder="" pattern=".{8,}" title="Password minimum of 8 characters" style="margin:0px auto; display:block;" aria-describedby="inputGroupPrepend" required>
               <div class="invalid-feedback" id="confirmRequired">
                           Required Field.
               </div>
           </div>


    <div class="form-group col-md-4 center-block d-block">
        <div id="recaptcha" style="text-align:center;"></div>

        <input type="hidden" class="hiddenRecaptcha required float-sm-right" name="hiddenRecaptcha" id="hiddenRecaptcha">
        <div id="hiddenRecaptcha" class="g-recaptcha d-flex justify-content-center" data-sitekey="6Le895kUAAAAAI0mfIUn2BiPTkbc-1aD1zt7L6UL"></div>
        <label id="lblerror" class="d-flex justify-content-center" style="color: red; font-size: smaller;"></label>
    </div>

    <div class="form-row col-md-8 center-block d-block">
            <button type="button" class="btn btn-primary float-right mx-1" onclick="login();">Cancel</button>
            <button type="submit" onsubmit="return false" id="newRegistration" class="btn btn-primary float-right mx-1">Register</button>

    </div>

    <br class ="clearfix"/>
    <br class ="clearfix"/>
    <br class ="clearfix"/>
    <br class ="clearfix"/>
       </form>


What I have tried:

Here is my javascript
(function () {
    'use strict';
    window.addEventListener('load', function () {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('form-container');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                debugger;
                
                $("#txtpassword").keydown(function () {
                    var value = $(this).val();
                    if (value.length == 0) {
                        $("#passRequired").html("Required Field");
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    else {
                        $("#passRequired").html("Password must contain 8 characters with numbers and letters with at least 1 upper case character.");
                        event.preventDefault();
                        event.stopPropagation();
                    }
                });

                $("#txtconfirmpassword").keydown(function () {
                    var password = $("#txtpassword");
                    var confirmpassword = $(this).val();
                    if (confirmpassword.length == 0) {
                        $("#confirmRequired").html("Required Field");
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    else if (password != confirmpassword) {
                        $("#confirmRequired").html("Password doesn't match");
                        event.preventDefault();
                        event.stopPropagation();
                    }
                });

                $("#txtemail").keydown(function () {
                    var value = $(this).val();
                    if (value.length == 0) {
                        $("#emailRequired").html("Required Field");
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    else {
                        $("#emailRequired").html("Invalid Email");
                        event.preventDefault();
                        event.stopPropagation();
                    }
                });


                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
Posted
Updated 11-Apr-19 1:23am

1 solution

Here's a method to maintain complete control of your form:

Give your form an id.
Change the type='submit' to 'button' and have an onclick event.
Do your validation in the onclick event target function.

If, at any point, the validation fails (or set a flag and handle at the end for multiple-failure reporting) just return from the function - maybe with the focus set to the errant input.

If it passes all the validation - then id.submit() and you're in business.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900