Validating specific input fields and triggering on click event

  • Resolved hsntgm

    (@hsntgm)


    7 years, 10 months ago

    Hello codepeople!

    I have buttons (add room1, add room2..) and they have many on click events ( .show().hide() etc.) When user clicks button they see new room’s input fields. Then, they are able to add another room too. I want to do that if first room information are empty and user want to add new room (click add room button);

    1) Stop all defined on click events! (do nothing)
    2) First fill first room information (force validating)
    3) If validation ok ,now when button clicked trigger all on click events.

    I tried to do it my code. I will be glad if you show me my logic errors.
    Thanks in advance.

    
<script>
jQuery(document).on(
'click', 
'[id*="fieldname'+'155_"]', function() validateMyForm { //when user click this button (Add New Room Button)
	var result = 'TRUE'; //string value + I am not sure about that variable is necessary
	var value = jQuery('[id*="fieldname'+'199_"]').val(); // call the value and assign it variable
	if (value != 0) { //if all three input fields have a value (fieldname'+'199 = fieldname1*fieldname2*fieldname3)
		jQuery('.room2').show();
		jQuery('.x2').hide();
		jQuery('.x2').addClass('deneme3');
		jQuery('.x3').addClass('deneme3');
		jQuery('.x5').hide();
		jQuery('.x8').show();
		jQuery( '.approve11 label').html( '2 Rooms Added' );	
        } else {
		var result = 'FALSE'; // i am not sure - return false; - assign false value to function automatically so i added second result variable too		
		return false; //i mean don't trigger this function (break it) if input fields are empty (value == 0) (do nothing, don't apply above jquery events) 
		}	
	if (validateMyForm() == false || result == 'FALSE' ) { //if function breaked and returned false, validate the these three fields first
		jQuery('[id*="fieldname'+'6_"],[id*="fieldname'+'7_"],[id*="fieldname'+'13_"]').addClass('required'); // make them required first
		jQuery(this).closest('[id*="fieldname'+'6_"],[id*="fieldname'+'7_"],[id*="fieldname'+'13_"]').valid(); // second validate them
				
		} if jQuery(this).closest('[id*="fieldname'+'6_"],[id*="fieldname'+'7_"],[id*="fieldname'+'13_"]').valid() { // if validation is ok trigger click events
				jQuery('.oda2').show();
				jQuery('.x2').hide();
				jQuery('.x2').addClass('deneme3');
				jQuery('.x3').addClass('deneme3');
				jQuery('.x5').hide();
				jQuery('.x8').show();
				jQuery( '.onaylama11 label').html( '2 Oda Eklendi' );
			} else {                   //if validation is not ok
			return validateMyForm();  //trigger the function	
			}				
});
</script>
    • This topic was modified 7 years, 10 months ago by hsntgm.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @hsntgm,

    You simply should add or remove the special class name: ignore, for excluding or including some fields from the form’s validation.

    For example, assuming that your form includes two additional container fields with the class names: room2, and room3 respectively.

    Into the “HTML Content” field insert the piece of code below to ignore all the fields in the room2, and room3 by default, and hide them:

    <style>#fbuilder .room2, #fbuilder .room3{display:none;}</style>
<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
fbuilderjQuery('.room2,.room3').find('input,select,textarea').addClass('ignore');
});
</script>

    Finally, the onclick event of the button to display the room2:

    jQuery('.room2').show().find('input,select,textarea').removeClass('ignore');

    The code of the button to hide the room2 would be:

    jQuery('.room2').hide().find('input,select,textarea').addClass('ignore');

    Use a similar code for the buttons that show/hide the fields of third room.

    I’m sorry, but if you need additional help implementing your project, you should hire a custom coding service through my personal website:

    https://cff.dwbooster.com/customization

    Best regards.

    Thread Starter hsntgm

    (@hsntgm)

    Hello,

    I tried your solution but my form structure ignored it:)

    I found a solution with this key code and of course with lots of manuel other rules. I realised cff use validate.js so it always assign this class etc.

    
.hasClass('valid')

    Also i implemented lobibox jquery plugin.It works pretty well but before it needs some code changes.I see that cff functions works with jQuery not $ it is a little confusing.

    Maybe you want to check this handy lobibox jquery library for cff.

    Best regards.

    PS: I started to my project with zero coding knowledge.I faced lots of problems and solved many of them without direct help.Thanks to your plugin it has a very good framework to understand logic of programming(especially jQuery in my perspective).

    I will ask you again if i cant understand some code logic.But you are always free to reply me with your default customization offer without ‘I’am sorry’.This is your job.For me it isn’t about to money.It is about to learing.

    • This reply was modified 7 years, 10 months ago by hsntgm.
    Plugin Author codepeople

    (@codepeople)

    Hello,

    If you want to use the “$” symbol in your code, I recommend you create an instance of it in the context of your code, and not to use the global instance, because there are other frameworks that use the same symbol (like Prototype Framework) and if you want distribute your plugin, won’t have the control where it will be used.

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Validating specific input fields and triggering on click event’ is closed to new replies.