[Resuelto] cred front-end validation

[Autor]

Mensajes

[linaS]

This is how I managed to inject custom front-end validation for text fields:

    $.validator.addMethod("english", function (value, element, param) {
        return ( value == "" || /^[a-zA-Z\.\- ]+$/i.test(value) );
    });

    $(document).on('cred_form_ready', function(evt, data){
	    if( data.form_id.indexOf('cred_form_') === 0)
	    {
		    $('.validate-english').each(function(){
			    var val = $(this).data('wpt-validate');
			    if( val )
			    	val.english = { message: 'English please', args: { 1: true } };
			    else
			    	val = { english: { message: 'English please', args: { 1: true } }};

			    	
			    $(this).attr('data-wpt-validate', '{}').data('wpt-validate', val).removeClass('js-wpt-validate');
		    });
}
});

Now I'm trying to do a similar trick to limit the number of selected checkboxes:

		    if( $('[name="wpcf-trip-purpose[]"]').length > 0 )
		    {
			    $('[name="wpcf-trip-purpose[]"]')
			    	.attr('data-wpt-validate', '{}')
			    	.data('wpt-validate', { 
				    	required: { args: { 1: true }, message: 'required' }, 
				    	maxlength: { args: { 1: 2 }, message: 'up to 2 items' }
			    	});
		    }

and it's not working... Any ideas of how to inject such check?

Basically what happens is that first checkbox becomes required (e.g. if it's not selected, I see 'required'), but any number of additionally selected checkboxes is accepted.

I know about back-end validation, and it's working, but front-end one works much nicer.

[Mohammed]

Hello Lina,

I'm Mohammed, the Toolset support team leader. I will do my best to help you.

I've prepared a working example on my localhost for your issue.It will not solve the exact issue you have but I strongly think that it will help you. please check the following code:

jQuery(document).ready(function($){
jQuery('#cred_form_60_1').submit(function( event ) {
   var selectedOptions=new Array();
    $('[name="wpcf-postscheckboxesfield[]"]').each(function(i,e) {
    if ($(e).is(':checked')) {
      selectedOptions.push($(e).val());
    }
});
alert('length= '+selectedOptions.length);
event.preventDefault();

});
});

--My checkboxes field name is wpcf-postscheckboxesfield[] , you can change it with yours.
--The selectedOptions array holds the selected checkboxes values. so you can use it to implement your requirements.
--The event.preventDefault(); line stops the form to submit, so, you can use it in the condition that fits your logic.

Please let me know if this helps.

Thanks.

[linaS]

Well, this is obvious solution, but it doesn't look so nice as jqvalidate that is used for other stuff (e.g. required fields or content checking). I hope to have all validations to look the same...

[Mohammed]

Hi Lina,

I've consulted a developer for this. It seems that we have an issue with JQ validation.

I'm waiting for an answer from him to confirm that. so, Please wait and I will get back to you ASAP.

Thanks.

[Mohammed]

Hi Lina,

I was wrong, we don't have an issue here.I've contacted one of our developers and had a long session regarding this which came with the right solution for your requirement.

Please add the following code to the CRED form JS and let me know if it works with you:

jQuery(document).ready(function() {
  jQuery.validator.addMethod("maxselections", function(value, element, param) {
    var element_name = jQuery(element).attr('name');
    return (jQuery('input[name="' + element_name + '"]:checked').length <= param[1]);
  });

  jQuery('input[name="wpcf-multi-check[]"]').attr('data-wpt-validate', '{}')
    .data('wpt-validate', {
      required: {
        args: {
          1: true
        },
        message: 'required'
      },
      maxselections: {
        args: {
          1: 2
        },
        message: 'up to 2 items'
      }
    });;
});

Thanks

[linaS]

Aha, custom selection checker. This is a good one!

But 'required' still doesn't work properly... It does require the FIRST checkbox to be selected, instead of ANY checkbox...

[Mohammed]

Hi Lina,

Unfortunately, there is no way to fix this. I would offer you another solution by adding a condition and changing the message being displayed accordingly.

Please try the following code and let me if it will work with you:

jQuery(document).ready(function() {
	//Up 2 items validation  
	jQuery.validator.addMethod("maxselections", function(value, element, param) {
								var element_name = jQuery(element).attr('name');
								return (jQuery('input[name="' + element_name + '"]:checked').length !=0 &&jQuery('input[name="' + element_name + '"]:checked').length <= param[1]);
							  });
							  
	jQuery('input[name="wpcf-postscheckboxesfield[]"]').attr('data-wpt-validate', '{}')
		.data('wpt-validate', {
		  maxselections: {
			args: {
			  1: 2
			},
			message: 'You have to choose at least 1, maximum two items'
		  }
	});	
	
});

If you want, I would submit a feature request for the required validation issue but in this case, I can't guarantee if it will be implemented or not.The reason of this is that we prioritize the feature requests according to some factors like the number of clients who requested this feature and its importance to our products.

Thanks,
Mohammed