Jun 12, 2012 6:57 AM
135 Posts

CSJS validation in onchange event: field loses focus

  • Category: Dojo and Client Side JavaScript
  • Platform: Windows
  • Release: 8.5.3
  • Role:
  • Tags: onChange,focus
  • Replies: 2
Hi,
 
I need to validate e-mail address in text field and I'm doing it with client side Javascript in onchange event. The problem is that I cannot get the focus stay in the field if validation fails. This is what I have:
 

alert("Please enter valid e-mail address.");

inpRepliesToEmail.focus();

return false;
 
This works in onblur event but the problem there is that onblur SSJS will execute also when I return false which I don't want to happen.
 
Of course I could move the validation to server side and see how that works. Any ideas how to get the focus stay when validating in client side? I have a couple of workarounds in mind:
 
- Use setTimeout() to move focus back to the field
- Set field value in CSJS which tells SSJS to exit
 
But do I really have to use these workarounds for a basic thing like this?
 

thanks, 
 
- Panu 

 
Jun 12, 2012 8:24 AM
126 Posts
Re: CSJS validation in onchange event: field loses focus
The below worked fine for me:
 
<xp:eventHandler event="onchange" submit="false">
<xp:this.script>
<xp:executeClientScript>
<xp:this.script><![CDATA[
var input = dojo.byId('#{id:inputText1}');
 
if(input.value == "example")
{
alert("ERROR");
input.focus();
}
                         ]]></xp:this.script>
</xp:executeClientScript>
</xp:this.script>
</xp:eventHandler>
 
 
however if this is for a form entry field and you have access to the ExtLib that comes from openNTF.org or passport advantage, I would suggest using the formTable control and a validator. Validators are already inbuilt, you can apply them to a form element and it won't allow form submission until the issue is resolved. The reason the form table is good is because it will display a yellow box on top of the control with a warning message and a list of all the validation fails and place a red X on top of each field that has failed. It adds a lot of functionality. 
 
e.g.  
 
 
<xe:formRow labelPosition="left" label="test">
<xp:inputText id="inputText1">
<xp:this.validators>
<xp:validateExpression message="Failed">
<xp:this.expression><![CDATA[#{javascript:
 
if(getComponent('inputText1').getValue() == "example")
{
return true;
}
else
{
return false;
}
 
}]]></xp:this.expression>
</xp:validateExpression>
</xp:this.validators>
</xp:inputText>
</xe:formRow> 
Jun 12, 2012 2:18 PM
135 Posts
Re: CSJS validation in onchange event: field loses focus
Hi,
 
thank you for looking into this! Did you test with Chrome? I tested originally with IE9 and now also with Chrome and Firefox. The result is that it works only with Chrome!
 
Thanks also for the ext lib example. I may use it if I decide to go to server side validation (then I would need to change all fields on this form that are required or have validation). So far I haven't used ext lib in real development, just experimented a little bit. If I had an opportunity to build an application from scratch I would definitely build it fully based on ext lib controls. Unfortunately my projects are almost always modifications to applications developed by someone else and I'm waiting for a good opportunity to start adding ext lib stuff. So far I'm still very unfamiliar with ext lib which makes me hesitate a bit before adding it to an existing application.
 
- Panu