How to make a text field required once a checkbox is checked?

[Warren McInnes]

How do i make a text field required once a check is checked?

Emergency

[ ] NO(unchecked)

[/] Yes(checked)

if checked, textfield(255 characters)

Reason:

must become required? and preferably hidden if check box is unchecked?

Can anyone assist?

[RambanamP · Accepted solution]

i have modified little bit so try with this

<script type="text/javascript"> 
jQuery(document).ready(function($) {   
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {   
    callHideShowFunction();
});
callHideShowFunction();
function  callHideShowFunction(){
        showHideReason();
        $("#customfield_11704").closest('div.field-group').hide(); 
        $('input:radio[name=customfield_11911]').click(function() {
            showHideReason();
        });
            //the following event will work on only create screen
            $('#create-issue-submit, #issue-create-submit').click(function() {
				var emergencyImpl=$('input[name=customfield_11911]:checked + label').text();
                var reasonValue=$("#customfield_11704").val();
                if( emergencyImpl =='Yes' && ( reasonValue == '' ||  reasonValue == ' ') ){
                alert("Please enter Reason");
                return false;              
                }                 
              });    
		
		
}
    function showHideReason(){         
        var emergencyImpl=$('input[name=customfield_11911]:checked + label').text();     
        if( emergencyImpl == "Yes" ){
            $("#customfield_11704").closest('div.field-group').show();			
        }else {
            $('#customfield_11704').val('');
            $("#customfield_11704").closest('div.field-group').hide();			
        }
		  		
    }
});
</script>

[Warren McInnes]

This works perfectly, Thank you so much for your great efforts!

[RambanamP]

glad to hear it worked finally :)

Cheers!!!

[Kumar]

Hi @RambanamP @Warren McInnesI have the same task that i have to do can you please tell me how it worked for you here is my situation

I have field called "Source" select list (single choice) type custom field

in that i have added options A,B,C,D&Other.

Now when i select the option D and Other . A text field has to view on create and edit screen when i select the A,B,C that text field suppose to hide

could you explain me  guys step by step  how can I achieve this .

Thanks,

Phani

[RambanamP]

to make reason field mandatory when radio button selected as yes

<script type="text/javascript"> 
jQuery(document).ready(function($) {   
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {   
    callHideShowFunction();
});
callHideShowFunction();
function  callHideShowFunction(){
        showHideReason();
        $("#customfield_11704").closest('div.field-group').hide(); 
        $('input:radio[name=customfield_11911]').click(function() {
            showHideReason();
        });
}
    function showHideReason(){         
        var emergencyImpl=$('input[name=customfield_11911]:checked + label').text();
     var flag=false;
        if( emergencyImpl == "Yes" ){
            $("#customfield_11704").closest('div.field-group').show();
			flag=true;
        }else {
            $('#customfield_11704').val('');
            $("#customfield_11704").closest('div.field-group').hide();
			flag=false;
        }
		
		  // use the following line if you want to make it work on all screens
            //$('#issue-workflow-transition-submit, #create-issue-submit, #issue-create-submit, #edit-issue-submit, #issue-edit-submit').click(function() {
            //the following event will work on only create screen
            $('#create-issue-submit, #issue-create-submit').click(function() {
                var reasonValue=$("#customfield_11704").val();
                if( flag && reasonValue == '' && reasonValue == ' '){
                alert("Please enter Reason");// change alert message as per your requirement
                return false;              
                }
                 
                });            
             
        });   
		
    }
});
</script>

[Warren McInnes]

This code does not work, reason field is now visable always on issue create screen always and not Required/Manditory?

[Warren McInnes]

This code has worked the best so far:

<script type="text/javascript">  
jQuery(document).ready(function($) {    
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {    
    callHideShowFunction();
});
callHideShowFunction();
function  callHideShowFunction(){
        showHideReason();
        $("#customfield_11910").closest('div.field-group').hide();  
        $('input:radio[name=customfield_11911]').click(function() { 
            showHideReason();
        });
}
    function showHideReason(){          
        var emergencyImpl=$('input[name=customfield_11911]:checked + label').text();
     
        if( emergencyImpl == "This is an emergency implemetation" ){ 
            $("#customfield_11910").closest('div.field-group').show();
        }else {
            $('#customfield_11910').val('');
            $("#customfield_11910").closest('div.field-group').hide();
        }
    }
});
</script>

[Warren McInnes]

Answer is here:

https://answers.atlassian.com/questions/158035/need-to-hide-show-a-textfield-based-on-the-value-of-the-check-box-using-javascript?page=1

[RambanamP]

following script is for to make text field mandatory if checkbox checked as Yes

<script type="text/javascript">  
jQuery(document).ready(function($) {
	JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
		checkBoxFunction();
	});
	checkBoxFunction();
	
function checkBoxFunction(){				
			showorhidefields(); 
			//assume 4 checkbox there with name  'customfield_11705'
		$("#customfield_11705-1,#customfield_11705-2").click(function() {
			showorhidefields(); 
		});	
	
		
	}
function showorhidefields(){
	alert("inside function");
	var checkedCheckboxes = $("input:checkbox[name=customfield_11705]:checked");		
			$("#customfield_11704").closest('div.field-group').hide();
	var flag==false;			
		checkedCheckboxes.each(function () {
				var selVal=$(this).next("label").text();
				alert("selVal: "+selVal);				
				if(selVal == 'Yes'){					
					$("#customfield_11704").closest('div.field-group').show();	
					flag=true;
				}else {
					$('#customfield_11704').val('');
					$("#customfield_11704").closest('div.field-group').hide();
					flag=false;
				}				
			});
			// use the following line if you want to make it work on all screens
			//$('#issue-workflow-transition-submit, #create-issue-submit, #issue-create-submit, #edit-issue-submit, #issue-edit-submit').click(function() {
			//the following event will work on only create screen
			$('#create-issue-submit, #issue-create-submit').click(function() {
				var reasonValue=$("#customfield_11704").val();
				if( flag && reasonValue == '' && reasonValue == ' '){
				alert("Please enter Reason");
				return false;				
				}
				
				});
			
			
		}	
		

	});
</script>

[RambanamP]

try with this

<script type="text/javascript">  
jQuery(document).ready(function($) {
	JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
		checkBoxFunction();
	});
	checkBoxFunction();
	
function checkBoxFunction(){				
			showorhidefields(); 
			//assume 4 checkbox there with name  'customfield_11705'
		$("#customfield_11705-1,#customfield_11705-2").click(function() {
			showorhidefields(); 
		});	
	
		
	}
function showorhidefields(){
	alert("inside function");
	var checkedCheckboxes = $("input:checkbox[name=customfield_11705]:checked");		
			$("#customfield_11704").closest('div.field-group').hide();		
		checkedCheckboxes.each(function () {
				var selVal=$(this).next("label").text();
				alert("selVal: "+selVal);				
				if(selVal == 'Yes'){					
					$("#customfield_11704").closest('div.field-group').show();	
				}else {
					$('#customfield_11704').val('');
					$("#customfield_11704").closest('div.field-group').hide();
				}				
				
			});
		}	
		

	});
</script>

[Warren McInnes]

I'll give this a try, Thanks

[Warren McInnes]

Ok so this didn't work, It for some reason effected the custom fields page in admin mode by cutting off everything below "Emergency Implementation" customfield and did not effect the issue create screen at all? Do you know why?

[RambanamP]

i updated the answers and dont't forget to add this on field description in field configuration scheme

[Warren McInnes]

This relates to another question I asked: https://answers.atlassian.com/questions/158035/need-to-hide-show-a-textfield-based-on-the-value-of-the-check-box-using-javascript

Please someone give me some guidence?

[Joe Pitt]

One workaround is to put 2 transitions after the step the box would be checked. On one check to see if the box is checked and if it is show that transition and require the field on the transition. Show the other transition is the box isn't checked and don't require a value for the field. There may be a plug-in, perhaps the behavior one, that would enforce this so you should check for that, but you can't out of the box.

[Udo Brand]

There is a similar question, please see here

[Warren McInnes]

I saw that one, but no direct answer?