FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.



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 

FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.