javascript - 在 javascript 表单验证上停止页面重新加载

Question

网站：http ://bit.ly/15JAx04

上面的链接在页面底部有一个表格。当提交没有值/无效值时，页面验证会重新加载页面。如何让它只显示红色验证错误并保持在底部而不重新加载到页面顶部？我所知道的这个页面唯一的 JS 如下。

    function Check()
{  
  
  var returnValue = true;
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_name').val() == 'Full name')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_name').val(''); 
      returnValue = false;
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_company').val() == 'Company')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_company').val(''); 
      returnValue = false;
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_email').val() == 'Email')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_email').val(''); 
      returnValue = false;
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_phone').val() == 'Phone (optional)')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_phone').val('');       
  }  
  
  if ($('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_message').val() == 'Your message')
  {      
      $('#dnn_ctr612_XModPro_ctl00_ctl00_ctl00_message').val(''); 
      returnValue = false;
  }  
  
  return returnValue;
  
 }

Answer 1

使用这个方法-->

在您的表单中给出 action="return check();"

其中 check() 是 javascript 中的一个函数，

Function check()
{
if(your_form_values_condition)
{
return true;
}
else
{
alert("Please fill form correctly!");
return false;
}
}

Answer 2

像这样使用onclick="return Check()"-

<input type="submit" name="dnn$ctr632$XModPro$ctl00$ctl00$ctl00$ctl11" value="Send" onclick="return Check()"

Answer 3

您需要return在内联事件处理程序中接受值

您的代码中有：

<input type="submit" name="dnn$ctr632$XModPro$ctl00$ctl00$ctl00$ctl11" value="Send" onclick="Check();Web...

但是你需要

<input type="submit" name="dnn$ctr632$XModPro$ctl00$ctl00$ctl00$ctl11" value="Send" onclick="Web...; return Check();">

或将Check()功能添加到<form>元素中。

<form onsubmit="return Check();">

所以只有当Check()函数返回时才会提交表单true。

或者使用 jQuery 和这个简单的代码：

$( '#Form' ).submit( function() {
    if( Check() ) return true;
    else return false;
});

但是不要忘记从处理程序中Check()的提交按钮中删除调用，onclick因为在这种情况下您将收到重复的错误消息。