jQuery Form Validation Assign Submit Button

Question

So, I have a form and 2 buttons, 1 button is only for verifying email, meanwhile the other button is the form submit button. I'm using jQuery validation to validate the form.

What I want is it should only the SUBMIT button that can submit the form through submitHandler and execute alert("success"), but whenever I click the VERIFY button, it also submit the form through submitHandler and execute alert("success").

Here is the script:

index.html:

<form id="form_data">
    <div class="form-group">
        <label>Phone Number</label>
        <input id="phone_number" name="phone_number" required>
    </div>
    <div class="row">
        <div class="form-group col-9">
            <label>Email</label>
            <input id="email" name="email" required>
        </div>
        <div class="form-group col-3">
            <button id="btn_email">VERIFY</button>
        </div>
    </div>
    <div>
        <button id="form_data_submit" type="submit">SUBMIT</button>
    </div>
</form>

script.js

jQuery(document).ready(function () {
    var btnSubmitEl = $("#form_data_submit");
    var formEl = $("#form_data");

    formEl.validate({ // initialize jquery validation plugin
        rules: {
            phone_number: {
                required: true,
                number: true,
                minlength: 7,
                maxlength: 12
            },
            email: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
        },
        submitHandler: function (form) {
            alert("success")
            return false;
        }
    });
});

Am I missing something here?

Thanks

score 1 · Accepted Answer · answered Jul 18 '20 at 20:09

1

You should explicitly set type=”button" for the verify button as you're using HTML5. Default button behaviour submits the form. Already answered here

answered Jul 18 '20 at 20:09

parkourkarthik

834
1
8
20

At first, I thought that this is a problem specific to jQuery validation library. It turns out that in HTML5 a ` – Piko Monde Jul 18 '20 at 20:18

score -1 · Answer 2 · answered Jul 18 '20 at 20:36

You don't need 2 buttons to validate the form you could validate the form and submit using only one button, if for whatever reason you want to use 2 buttons you have to use 2 event listeners one for the validate button and one for the submit button, and the reason why your validate button submits the form it's because the formEl.validate takes an object, inside that object there is a function called submitHandler it submits the form after it's verified so you have to set it to return false. I have implemented this in the code bellow

jQuery(document).ready(function () {
    var btnSubmitEl = $("#form_data_submit");
    var formEl = $("#form_data");
    var verifybtn=$("#btn_email");
    btnSubmitEl.on("click",()=>{
       formEl.submit()//
         alert("success")

    })
    verifybtn.on("click",()=>{
    formEl.validate({ // initialize jquery validation plugin
        rules: {
            phone_number: {
                required: true,
                number: true,
                minlength: 7,
                maxlength: 12
            },
            email: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
        },
        submitHandler: function () {
            return false;
        }
    });
});
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form_data">
    <div class="form-group">
        <label>Phone Number</label>
        <input id="phone_number" name="phone_number" required>
    </div>
    <div class="row">
        <div class="form-group col-9">
            <label>Email</label>
            <input id="email" name="email" required>
        </div>
        <div class="form-group col-3">
            <button id="btn_email">VERIFY</button>
        </div>
    </div>
    <div>
        <button id="form_data_submit" type="submit">SUBMIT</button>
    </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

jQuery Form Validation Assign Submit Button

2 Answers2