CODEWITHSUNDEEP
validationyii2client-side-validation
AleCat83
AleCat83

Reputation: 1493

How to trigger active form validation manually before submit?

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

Upvotes: 10

Views: 20775

Answers (9)

Hitesh Jangid
Hitesh Jangid

Reputation: 210

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

Upvotes: 0

Roman Yakoviv
Roman Yakoviv

Reputation: 1724

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

Upvotes: 0

rishad2m8
rishad2m8

Reputation: 1508

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']); ?>

Upvotes: -1

DS9
DS9

Reputation: 3033

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

Upvotes: 7

clapas
clapas

Reputation: 1846

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.

Upvotes: 0

uiTeam324
uiTeam324

Reputation: 1245

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

Upvotes: 1

Nikhil Kadam
Nikhil Kadam

Reputation: 153

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

Upvotes: 2

BlueZed
BlueZed

Reputation: 859

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.

Upvotes: 13

soju
soju

Reputation: 25322

Yes it is possible, you should try this :

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

Upvotes: 1

Related Questions