关于grails的验证submitButton

Question

是否可以使用javascript在grails的<g:submitButton>标记的onCLick属性上实现验证？我正在使用webflow从一个页面转到另一个页面。这里是我的下一步按钮代码：

   <script type="text/Javascript">      
       function isfilipinoCitizen() {  
        var selected = "${accountInfo?.filipinoCitizen}"; 
         if(selected == "1"){ 
          return true; 
         }else{ 
          alert(selected) 
          alert("You must be a Filipino citizen to register!") 
          document.location.href = "myhomepage"; 
         } 
       } 
       </script> 

我想在这里做的是阻止该网页继续到下一个页面：

<g:submitButton class="btn btn-primary" name="next" value="Next" onclick="return isfilipinoCitizen()"></g:submitButton> 

的isfilipinoCitizen功能是在我的javascript代码中找到如果来自用户的输入是0，并将用户重定向到系统的主页。但它似乎根本不起作用。

任何你们的帮助是非常感谢。

谢谢！

Answer 1

首先，我认为你应该使用Firebug来检查实际呈现为html的内容。它还有助于发现一些javascript错误或无法加载资源。

其次，您应该检查javascript是否首先被调用，方法是在isfilipinoCitizen（）的开始处放置一个alert('come here');。之后，在第一个条件的警报。 JavaScript是一种特殊的语言，我们必须与之打交道:)时要小心：

   <script type="text/Javascript">      
       function isfilipinoCitizen() {  
        alert("come here"); 
        var selected = "${accountInfo?.filipinoCitizen}"; 
         if(selected == "1"){ 
          alert("come there"); 
          return true; 
         }else{ 
          alert(selected) 
          alert("You must be a Filipino citizen to register!") 
          document.location.href = "myhomepage"; 
         } 
       } 
       </script> 

最后（你能保证以后你的javascript函数得到正确的称呼），你必须做的比“document.location.href更多“阻止表单提交。为了快速生效，我会推荐jQuery和onSubmit() event。如果你喜欢纯JavaScript的解决方案，你可以遵循Galm和Anuj提出解决方案：把的onsubmit入标签：

<g:form name="myForm" action="myaction" onsubmit="return isfilipinoCitizen()">...</g:form> 

在失败的情况下，请记得返回false :)

P/s：直接插入${accountInfo?.filipinoCitizen}到javascript可能会起作用，但这不是最佳做法。将“isFilipinoCitizen”作为参数传递给javascript函数会更好。

另一个可用性想：如果你已经知道哪些用户已登记的权利，为什么一定要等到用户填写的所有表格，告诉他们，他们必须是菲律宾公民进行登记？为什么不在用户通过之前（页面加载后）通知用户？

Answer 2

尝试用onsubmit代替。

<g:submitButton class="btn btn-primary" name="next" value="Next" onsubmit="return isfilipinoCitizen()"></g:submitButton> 

而在你的函数返回true或false。