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

Stop page reload on javascript form validation

本文关键字：新加载 加载 表单 javascript 验证      更新时间：2023-09-26

站点：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;
  
 }

使用此方法-->

在您的表单中，give action="return check((；">

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

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

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

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

您需要在内联事件处理程序中接受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();">

或者在<form>元素中添加Check()函数。

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

因此，只有当Check()函数返回true时，才会提交表单。

或者将jQuery与以下简单代码结合使用：

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

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

相关文章：