Как отправить форму контроллеру с помощью ajax с проверкой magento 2

Моя форма такая

<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>

Это моя Функция sendform()

<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);
    }
    });
}

Если я нажму кнопку "Отправить" без заполнения каких-либо значений формы, она будет перенаправлена на контроллер и после проверки формы.

Я хочу сначала проверить, а затем отправить форму контроллеру. Я не хочу выполнять какую-либо пользовательскую проверку js.Я хочу использовать только проверку magento.

Author: Mujahidh, 2017-12-29
Source

2 answers

Попробуйте это: 

if (jQuery('#donation-request-form').valid()) {
    jQuery.ajax({
    type : 'POST',
    url : customurl,
    data : jQuery('#donation-request-form').serialize(),
    success: function(msg){
        alert(msg);
    }
    });
}
 8
Author: Nero Phung, 2017-12-29 06:11:31

Я нашел хороший способ отправки формы с помощью AJAX при использовании проверки формы по умолчанию magento2, которой я хотел бы поделиться с сообществом.

Мы просто используем приведенный ниже код для проверки формы 

require([‘jquery’,’mage/validation’], function($){

    var dataForm = $(‘#form-validate’);

    dataForm.mage(‘validation’, {});

});

Мы можем расширить это до:

require([‘jquery’,’mage/validation’], function($) {

  var dataForm = $(‘#form-validate’);

  dataForm.mage(‘validation’, {});

  $(‘button#submit-button’).click( function() { //can be replaced with any event   

    var status = dataForm.validation(‘isValid’); //validates form and returns boolean

    if(status) {
      console.log(‘form is validated’); //form is valid
      //Do the AJAX call here

    } else {

      console.log(‘form is not validated’); 

    }   

  });

});

Вы можете найти подробное описание по этой ссылке.

Надеюсь, это поможет!!

 4
Author: aton1004, 2020-02-19 09:23:03