How to trigger active form validation manually before submit?

Question

Is it possible to call the active form validation programmatically via JavaScript? I need to call the validation procedure before doing some ajax operations.

Answer 1

Guess I'm a bit late with a reply here but I just had the same question and the solution by soju did not work for me either.

So I looked a bit deeper into the JS-code of ActiveForm and found that it appears to monitor the status of each field in a variable and if the field is "untouched" the validation isn't triggered, unless submitting the actual form. So I changed my call to this:

var $form = $("#my-form"), 
    data = $form.data("yiiActiveForm");
$.each(data.attributes, function() {
    this.status = 3;
});
$form.yiiActiveForm("validate");

This now appears to be working as I expect.

Answer 2

We can achieve that by merging @BlueZed and @S Rana's answer.

You can write below script, so we can check that if form has any error in it then form will not submit (Even It will work for tabular (wizards) like form ).

    var $form = $("#form"), 
        data = $form.data("yiiActiveForm");
    $.each(data.attributes, function() {
        this.status = 3;
    });
    $form.yiiActiveForm("validate");

    if ($("#form").find(".has-error").length) {
        return false;
    }

Answer 3

Thanks blue zed, but before this - to append form field, u need to do this stuff...

// your input

$inputData = $form->field($model,"prductName");

// this remove next line & convert double quotes to single quotes

$newInputData= trim(preg_replace('/\s+/', ' ',str_replace('"',"'", $inputData)));

// then append like this

$("#table").append("'.$newInputData.'");

// this worked for me along with blue zend solution like this below

$this->registerJs('
    $(document).on("click","input[type=text]",function(){
            var $form = $("#w0"), 
            data = $form.data("yiiActiveForm");
            $.each(data.attributes, function() {
                this.status = 3;
            });
            $form.yiiActiveForm("validate");        
    });
');

Answer 4

Yes it is possible, you should try this :

$('#form-id').yiiActiveForm('validate');

Answer 5

this is worked for me

$this->registerJs( "
        $('body').on('beforeSubmit', 'form#product-form', function () {
             var form = $(this);
             // return false if form still have some validation errors
             if (form.find('.has-error').length) {
                  return false;
             }
             // submit form
             $.ajax({
                  url: form.attr('action'),
                  type: 'post',
                  data: form.serialize(),
                  success: function (response) {

                  }
             });
             return false;
        }); ");

Answer 6

The validation is activated when submitting the form. Thus, this will work:

$form.data('yiiActiveForm').submitting = true;
$form.yiiActiveForm('validate', false);

The second argument to validate is called forceValidate.

Answer 7

To validate manually from javascript, you should place following code to end of form submit event.

return  $('#your-form-id').yiiActiveForm('validate');

For novice users,

$('#your-form-id').submit(function () {       
    return  $('#your-form-id').yiiActiveForm('validate');
});

Also note that you should specify form id on ActiveForm like below

<?php $form = ActiveForm::begin(['id' => 'd4d-hub-form']); ?>

Answer 8

I had the same issue. And the are no clearly solution in official documentation and I don't know why any solution on Stackoverflow does not work for me. May be in the different versions of yii2 there is different ways to do that. I have spent a lot of time to find solution. In my case I have triggered validation for individual input on the form:

$('#form-id').data('yiiActiveForm').submitting = false;
$('#form-id').yiiActiveForm('validateAttribute', 'input-id'); //this will triger validation for input with id 'input-id'
$('#form-id').yiiActiveForm('validateAttribute', 'other-input-id'); //this will triger validation for input with id 'other-input-id'

please notice second parameter of function yiiActiveForm() it is not selector and it is not name of attribute it is id of input of attribute!!!

Answer 9

Try this

$("#form-id").data('yiiActiveForm').submitting = true; 
$("#form-id").yiiActiveForm('validate');

it will show validation error if any field is not valid. Also if all fields are validate then it will submit the request