CODEWITHSUNDEEP
javascriptjquery
Preety Singh
Preety Singh

Reputation: 221

Check regex validation on submit and focus all input fields if empty

I want to check the regex validation when I click on the button. It works fine when the button type is submit, but it does not redirect to another page where I have linked the button - however when I change its type to button it redirects to the other page normally and does not check the regex validation. I am also checking if all the input fields are filled, and focusing any empty fields. But I guess something is wrong with the code.

Demo

HTML CODE:

<form action="" method="POST" role="form" class="payment_form">
    <div class="contact_details">
        <div class="payment_details">
            <div class="form-group">
                <input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName"  placeholder="FULL NAME" required/>
            </div>
            <div class="form-group">
                 <input type="email" class="input_name" id="email" title="Eg: [email protected]" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
            </div>
            <div class="form-group">
                <input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
            </div>
        </div>
    </div>  
    <a href="thankyou.html" title=""><button type="submit" class="btn btn-primary pay_btn" >Continue</button></a>   
 </form>

JS:

$('.pay_btn').click(function(e){
   $(":input").each(function() {
      if($(this).val() === "")
      $(this).css('border-color', '#ff0000');
   });
});

Upvotes: 2

Views: 1761

Answers (3)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

I want to check the regex validation when I click on the button. It working fine, when the button type is submit but it does not redirect to another page where i have linked the button,

Whats happening here is, You click on the button who's type is submit, And this button will try to submit the form. So your validation will work on form submit. Since you don't have any url mentioned in the action="" attribute of your form, Your page doesn't know where to go. So solution is add the URL into this action attribute

<form action="thankyou.html" method="POST" role="form" class="payment_form">

but when I am changing the button type to button it redirects to other page normally and does not check the regex validation.

The reason for this is once you remove the button type submit it has nothing to do with the form anymore. Its just a plain button. But you have wrapped this button inside a anchor tag which has a href set. So this is as good as a page redirect by clicking a link, So the form is not submitted at all. Hence your validation keeps quiet. As it works only while form is submitted.

Upvotes: 0

Nandhini
Nandhini

Reputation: 354

@Preety Angel , Provide the html file name in the action attribute of form tag <form action="thankyou.html"> like below,

<form action="thankyou.html" method="POST" role="form" class="payment_form">
.......
</form>

Upvotes: 1

misss-popcorn
misss-popcorn

Reputation: 600

You have to remove anchor tag from submit button and write the name of html page in action ,this will work fine for page redirection when form is correctly field .For the one field focus at a time you have to change your logic out there .

Upvotes: 2

Related Questions