• State Suggested Answer
  • +3 person also asked this people also asked this
  • Replies 7 replies
  • Answers 1 answer
  • Subscribers 18 subscribers
  • Views 1557 views
  • Users 0 members are here
Options
Related

Check box validation error

Gangadhar Gowd

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
  • +1 in reply to Satish Polampalli 3sides

    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: 

    Fullscreen CustomCheckboxValidationDemo-Widget.xml Download 
    <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!

About
Privacy Policy
Terms of use
Copyright 2024 Verint, Inc.
Powered by Verint Community