Magento 2 – Submit Form to Controller Using AJAX with Validation

ajaxcontrollersform-validationmagento2

My form is like this

<form  data-mage-init='{"validation":{}}' id="donation-request-form" method="post" data-hasrequired="* Required Fields">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-xs-12 row-padding">
                <span class="fname-icon"></span>
                <input type="text" class="form-control fname" id="first_name" name="first_name" placeholder="First Name" data-validate='{"required":true}'>
        </div>
        <div class="col-lg-6 col-md-6 col-xs-12 row-padding">
                    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
        </div>
    </div>
    <div class="form-button button-section">
        <input class="btn-orange" type="submit" value="Request Donation" onclick="SendForm()">
    </div>
</form>

This is my SendForm() function

<script type="text/javascript">
function SendForm() {       
    var customurl = "<?php echo $baseURL_l.'emails/index/index'?>";
    alert(customurl);
    jQuery.ajax({
    type : 'POST',
    url : customurl,
    data : jQuery('#donation-request-form').serialize(),
    success: function(msg){
        alert(msg);
    }
    });
}

If i click submit button without filling any values of the form it will redirect to the controller and after the form validation is happening.

I want to validate first and submit the form to controller second.
I do not want to do any custom js validation.I want to use only magento validation.

Best Answer

Try this:

if (jQuery('#donation-request-form').valid()) {
    jQuery.ajax({
    type : 'POST',
    url : customurl,
    data : jQuery('#donation-request-form').serialize(),
    success: function(msg){
        alert(msg);
    }
    });
}
Related Topic