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

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
  • 0 in reply to Satish Kumar (3sides)

    To be specific "The required filed Message" won't allow us to proceed even if we check the other two checkboxes, It only disappears when we check the first check box and then allows to proceed to submit

  • +1 in reply to Satish Kumar (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