Check box validation error

Former Member
Former Member

Hi,

We have checkbox group as

<input type="checkbox" name="labelcheckbox" value=" Marketing" class="custom">

<input type="checkbox" name="labelcheckbox" value=" Customer" class="custom">

<input type="checkbox" name="labelcheckbox" value=" Emp" class="custom">



added validation code as 

context.save.evolutionValidation('addField', $("input[name='labelcheckbox']") ,
{
required: true,
messages: { required: context.subjectRequiredText }
},

'#' + context.wrapperId + ' .right-lable-error .field-item-validation',null);
}

in 11.x code is working excellent where as in 12.x its only validating first check box and ignoring other check boxes.

Parents Reply Children
  • Hi . Sorry for the delay.

    The old behavior to validate that a single checkbox within a list of checkboxes is checked relied upon the undefined and undocumented behavior of an underlying dependency. Instead, I'd recommend using the addCustomValidation method of the evolutionValidation jQuery Plugin.  

    I've attached a sample widget showing an adaptation of your above code with custom validation implemented: 

    <scriptedContentFragments>
    	<scriptedContentFragment name="Custom Checkbox Validation Demo" version="12.0.0.0" description="Demonstrates custom validation use with checkbox inputs" instanceIdentifier="b4f77b9ada984ae29048b92ae64ee52d" theme="" isCacheable="false" varyCacheByUser="false" showHeaderByDefault="true" cssClass="" lastModified="2022-08-31 18:25:45Z">
    		<contentScript language="Velocity"><![CDATA[<form>
        <fieldset>
        	<ul class="field-list">
        		<li class="field-item">
        			<span class="field-item-input">
        		        <input type="checkbox" name="subject" id="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('Marketing'))" value="Marketing" />
        			    <label for="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('Marketing'))">Marketing</label>
        			</span>
        		</li>
        		<li class="field-item checkbox">
        			<span class="field-item-input">
                        <input type="checkbox" name="subject" id="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('Customer'))" value="Customer" />
        			    <label for="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('Customer'))">Customer</label>
        			</span>
        		</li>
        		<li class="field-item checkbox">
        			<span class="field-item-input">
                        <input type="checkbox" name="subject" id="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('Emp'))" value="Emp" />
        			    <label for="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('Emp'))">Emp</label>
        			</span>
        		</li>
        		<li class="field-item submit">
                    <span class="field-item-validation subject" style="display: none;"></span>
        			<span class="field-item-input">
        				<a class="internal-link button save-post" href="#" id="$core_v2_encoding.HtmlAttributeEncode($core_v2_widget.UniqueId('submit'))">
        					Submit
        				</a>
        				<span style="visibility: hidden;" class="processing"><span class="ui-loading" data-width="45" data-height="15"></span></span>
        			</span>
        		</li>
        	</ul>
        </fieldset>
    </form>
    
    #registerEndOfPageHtml()
    	<script type="text/javascript">
    	jQuery(function(j){
    
    	    // capture input referenes
    	    var submitButton = j('#$core_v2_encoding.JavascriptEncode($core_v2_widget.UniqueId('submit'))');
    	    var subjectCheckboxes = j('input[name="subject"]:checkbox');
    
    	    // add validation
            submitButton.evolutionValidation({
                onValidated: function(isValid) {
                    if (isValid) {
                        submitButton.removeClass('disabled');
                        return true;
                    } else {
                        submitButton.addClass('disabled');
                        return false;
                    }
                },
                onSuccessfulClick: function () {
                    submitButton.addClass('disabled');
                    alert('Validation Passed');
                }
            });
    
            // re-validate whenever a checkbox input changes, not just on submit
            subjectCheckboxes.on('change', function() {
                submitButton.evolutionValidation('validate');
            });
    
            // add a custom validator to validate at least one of the checkbox inputs is checked
            submitButton.evolutionValidation('addCustomValidation', subjectCheckboxes, function() {
                return subjectCheckboxes.is(':checked');
            }, 'Please choose at least one subject.', subjectCheckboxes.closest('.field-list').find('.field-item-validation.subject'));
    
    	});
    	</script>
    #end]]></contentScript>
    		<headerScript language="Velocity" />
    		<additionalCssScript language="Velocity" />
    	</scriptedContentFragment>
    </scriptedContentFragments>

    Hope this helps!