Disable validation on click in a button?

[gadiro]

trafficstars

Hi.

I'm using your great plugin jquery form validator in a open source project, but I have a wizard form with buttons back reset and next. When I create the jquery form validator object all the submits buttons in my page are disabled.

How can I do the form is valid or disable the validation for the back button and reset?. I writed my form in php and musts submit to the server in each step.

Thanks again for your great plugin and regards.

[victorjonsson]

Could you provide us with your code perhaps?

[gadiro]

Hi Victor. Thanks for your reply. My code is:

//Custom validation
var config = {
                // ordinary validation config
                form : 'form',
                // reference to elements and the validation rules that should be applied
                validate : {
                    '#createUsuarioCursoRol_documento' : {
                        validation : 'addusuariocursorolstep1',
                        length : 'min3',
                        'error-msg' : 'The document is not valid'
                    },
                    '#createUsuarioCursoRol_tipodocumento' : {
                        validation : 'addusuariocursorolstep1',
                        length : 'min3',
                        'error-msg' : 'Select document type'
                    }
                }
            };


            $.formUtils.addValidator({
                name: 'addusuariocursorolstep1',
                validatorFunction: function (value, $el, config, language, $form) {

                    var documento = $('#createUsuarioCursoRol_documento').val();
                    var tipodocumento = $('#createUsuarioCursoRol_tipodocumento').val();
                    if (documento.length == 0
                            || tipodocumento.length == 0
                    ) {
                        return 0;
                    }

                    if(documento.length != 0
                            && tipodocumento.length != 0
                    ) {

                        if(tipodocumento =='DNI' || tipodocumento == 'NIE'){
                            if(validar(documento, tipodocumento))
                             return 1;
                            else
                             return 0;
                        }

                        return 1;
                    }

                },
                errorMessage : 'Debe buscar por nombre o apellidos o bien por documento',
                errorMessageKey: 'badBuscarUsuario'
            });


            function validar(documento, tipodumento) {
                if(tipodumento=='DNI') {
                    if (validaNif(documento) == true) {
                        return true;
                    }
                }else if(tipodumento == 'NIE') {
                    if (validaNie(documento) == true) {
                        return true;
                    }
                }else if(tipodumento != 'PAS' && tipodumento != 'OTROS') {
                    if(documento.length < 6)
                      return false;
                }

                return false;
            }

            function validaNif(value) {
                value = value.toUpperCase();

                // Basic format test
                if (!value.match('((^[A-Z]{1}[0-9]{7}[A-Z0-9]{1}$|^[T]{1}[A-Z0-9]{8}$)|^[0-9]{8}[A-Z]{1}$)')) {
                    return false;
                }

                // Test NIF
                if (/^[0-9]{8}[A-Z]{1}$/.test(value)) {
                    return ("TRWAGMYFPDXBNJZSQVHLCKE".charAt(value.substring(8, 0) % 23) === value.charAt(8));
                }
                // Test specials NIF (starts with K, L or M)
                if (/^[KLM]{1}/.test(value)) {
                    return (value[8] === String.fromCharCode(64));
                }
                return false;
            }

            function validaNie(value) {
                value = value.toUpperCase();
                // Basic format test
                if (!value.match('((^[A-Z]{1}[0-9]{7}[A-Z0-9]{1}$|^[T]{1}[A-Z0-9]{8}$)|^[0-9]{8}[A-Z]{1}$)')) {
                    return false;
                }
                // Test NIE
                //T
                if (/^[T]{1}/.test(value)) {
                    return (value[8] === /^[T]{1}[A-Z0-9]{8}$/.test(value));
                }

                //XYZ
                if (/^[XYZ]{1}/.test(value)) {
                    return (
                    value[8] === "TRWAGMYFPDXBNJZSQVHLCKE".charAt(
                    value.replace('X', '0')
                            .replace('Y', '1')
                            .replace('Z', '2')
                            .substring(0, 8) % 23
                )
                );
                }
                return false;
            }

            $.validate({
                modules : 'jsconf',
                onModulesLoaded : function() {
                    $.setupValidation( config );
                }
            });

And my html code is with my three buttons.

<div class="craue_formflow_buttons craue_formflow_button_count_3">
    <ul class="list-unstyled list-inline pull-right">
                            <li>

                <button formnovalidate="formnovalidate" value="back" name="flow_createUsuarioCursoRol_transition" id="lastStep" class="btn btn-sm btn-default" type="submit">
                    <i class="fa fa-chevron-circle-left"></i>&nbsp;Anterior</button>

                </li>
                    <li>
        <button formnovalidate="formnovalidate" value="reset" name="flow_createUsuarioCursoRol_transition" class="btn btn-sm btn-warning" type="submit">
            <i class="fa fa-refresh"></i>&nbsp;Empezar de nuevo</button>
        </li><li>
                            <button class="btn btn-sm btn-primary btn-siguiente" type="submit">
                    <i class="fa fa-chevron-circle-right"></i>&nbsp;Siguiente            </button>
        </li>
    </ul>
</div>

My problem is when I press the back button (id="lastStep"), I need to disable the jquery form validator to submit the form. Thanks again & regards. Carlos

[nemobeamo]

I've found 2 different ways of disabling validation via the onclick event. They're not very elegant but they work.

1. Remove the "data-validation" attributes in all of your input fields.

$("#lastSleep").click(function(){
                            $(":input").removeAttr("data-validation");
                            $("#{!$Component.mainform}").submit();

});

2. Override the $.formUtils.validateInput method so that it returns true in all cases.

$("#lastSleep").click(function(){
                            $.formUtils.validateInput = function(){return true;}
                            $("#{!$Component.mainform}").submit();

 });

Option 2 is probably a more fool proof method.

[makbeta]

I found perhaps a more elegant solution that works consistently. I wrote a function that triggers the validate method and passes in all the inputs in the form in an array to the ignore property. So the validation gets disabled on all fields, right before the form is submitted.

  $.validate({
    ignore: allInputs
  });