[Resolved] How to add javascript/jquery to a cred_field such as onblur?

[Author]

Posts

[jeffS-2]

Tell us what you are trying to do?
I am creating a form to change email address. I do not want the current email to display in the field, so I am using a cred_generic_field called new_email. I also have a second email field called new_email_confirm to confirm the first one is entered correctly. So, a simple javascript function can compare the 2 fields. But, how can I add an on-event to the cred_generic_field such as onblur=check_email_same(); ? I want to use javascript so I can compare before the Submit occurs.

Is there any documentation that you are following?
The documentation for cred_user_form does not discuss this particular type of problem (that I could find using site search.)

After a search, I found issues related to this from 2015, in which 2 people wanted to know how to create a Change-My-Email user form without displaying the current email address in the user_email field. It seems this is not the correct way to have this field work in CRED User forms. Why hasn't this function been fixed or changed? Is there another reason?

Thanks,
Jeff Safire
---------------

[Luo Yang]

Hello,

There isn't such a built-in feature within Toolset Form plugin, if you agree, we can take it as a feature request.

Currently, you can setup custom JS codes, like these:
1) edit the user form, put two generic email fields into form content:

<div class="form-group">
	<label>New email</label>
	[cred_generic_field type='email' field='new-email']
{
"required":1,
"validate_format":1,
"default":""
}
[/cred_generic_field]
	</div>
<label>Repeat new email</label>
	[cred_generic_field type='email' field='repeat-new-email']
{
"required":1,
"validate_format":1,
"default":""
}
[/cred_generic_field]
	</div>

2) Setup the custom JS codes using "cred_form_ready" event, like this:

jQuery(document).on('cred_form_ready', function() {
    
  jQuery( 'input[name="repeat-new-email"]' ).change(function(e){
  	console.log('repeat-new-email: ' + jQuery( 'input[name="repeat-new-email"]' ).val());
  	console.log('new-email：' + jQuery( 'input[name="new-email"]' ).val());
// here do your custom validations
  }); 
  
});

More help:
hidden link

[jeffS-2]

Luo -

Well, part of my problem was I didn't have cred_form_ready. Now, at least I get the event to fire on change.

However, I am trying to set the error message when the two email fields do not match, using setCustomValidity('Emails don't match.'). I am having trouble doint this. Here is my code:

CRED form:

	<div id="newEmailAddr" style="width:50%;margin-bottom:2rem;">
        <label>Enter New Primary Email Address</label>
		[cred_generic_field type='email' field='new_user_email_temp' id='new_user_email_temp']
		{
		"required":1,
		"validate_format":1,
		"default":""
		}
		[/cred_generic_field]
	</div>
	<div id="newEmailAddrConfirm" style="width:50%;margin-bottom:2rem;">
        <label>Confirm New Primary Email Address</label>
		[cred_generic_field type='email' field='new_user_email_temp_confirm' id='new_user_email_temp_confirm']
		{
		"required":1,
		"validate_format":1,
		"default":""
		}
		[/cred_generic_field]
	</div>

Javascript: In line 8, I try to convert to DOM object so I can use set CustomValidity but it returns "undefined".

jQuery(document).on('cred_form_ready', function() {
     
  jQuery( 'input[name="new_user_email_temp_confirm"]' ).change(function(e) {
    console.log('new_user_email_temp_confirm: ' + jQuery( 'input[name="new_user_email_temp_confirm"]' ).val());
    console.log('new_user_email_temp：' + jQuery( 'input[name="new_user_email_temp"]' ).val());

	if ( (jQuery( 'input[name="new_user_email_temp_confirm"]' ).val() ) !== (jQuery( 'input[name="new_user_email_temp"]' ).val() ) ) {    
		var newEmailConf = jQuery('#newEmailAddrConfirm input');   // need DOM reference for setCustomValidity, but this doesn't work???
		newEmailConf.setCustomValidity('Passwords Dont Match');
  	} else {
    		newEmailConf.setCustomValidity('');
  	}
  }); 
});

[Luo Yang]

You can use getElementById() to get the DOM object, for example:

      	var newEmailconfirmfieldID = jQuery( 'input[name="new_user_email_temp_confirm"]' ).attr('id');
    	console.log('newEmailconfirmfieldID：' + newEmailconfirmfieldID );
        var newEmailConf = document.getElementById(newEmailconfirmfieldID);

Since it is a custom JS codes problem, it is out the range of Toolset support, you can also check it with our Toolset contractors:
https://toolset.com/contractors/

[jeffS-2]

My issue is resolved now. Thank you!