Javascript Mvc验证和加载程序

在MVC视图中的form post方法中， 若激活了验证，那个么加载程序不应该出现，只显示验证 否则，将不会触发验证，然后加载程序将来保存数据

我所尝试的：

将加载程序放置在javascript中的表单提交上，并禁用该按钮

$（“#frmContact”）.submit（函数（e）{
$（“.loading”）.css（“显示”、“内联”）；
});

1） 加载器：问题是，如果启动了验证，那么加载器也会与验证一起出现，然后需要重新加载页面和输入数据

2） 禁用提交按钮：如果我在单击时禁用提交按钮，并且如果验证触发，则“之后”按钮保持禁用状态，而不是启用。因此，如果存在验证，则启用按钮；如果未触发验证，则禁用按钮

所有这些都是为了避免重复输入，如果用户单击submit按钮，则该按钮将启用。

您可以这样做

HTML:

<div id="ajax-loader" style="display:none;">
     <img src="<?php echo $loaderSrc; ?>" style="height: 200px;width: 200px;">
</div>

<input type="submit" id = "btnSubmit" value="Submit" name="yt0" onclick="return validateForm();">

“style=”高度：200px；宽度：200px；">

在脚本中：（这里您可以更改字段…我正在显示我的一个示例）

var error\u flag=true；
var error_required=真；
$（'#btnsupmit'）。单击（函数（e）{
e、 预防默认值（）；
if（需要错误标志和错误）{
$（“#ajax加载程序”）.css（“显示”、“块”）；
$（'form#login form'）。提交（）；
}
});
函数validateForm（）{
var user_pass=document.getElementById（'LoginForm[user_pass]'）。值；
var dob=document.getElementById（'LoginForm_dob'）。值；
var re_pass=document.getElementById（'re_pass'）。值；
var user\u name=document.getElementById（'LoginForm[user\u name'））.value；
var email=document.getElementById（'LoginForm[email]'）。值；
var tnc=document.getElementById（'checkbox1'）。选中；
//警报（tnc）；
var filter=/^（[\w-]+（？：\[\w-]+）*）@（（？：[\w-]+\）*\w[\w-]{0,66}）\.（[a-z]{2,6}:（\.[a-z]{2}）$/i；
如果（用户名=“”）{
验证（'LoginForm[用户名]，'Nick name是必需的'）；
}否则如果（电子邮件=“”）{
removeerror（'LoginForm[user_name]”）；
验证（'LoginForm[email]'，'email是必需的'）；
}如果（！filter.test（电子邮件））{
removeerror（'LoginForm[email]'）；
验证（'LoginForm[email]，'Please enter valid email'）；
}否则如果（用户通过=“”）{
//removeerror（'LoginForm[email]'）；
验证（'LoginForm[user_pass]，'Password is required'）；
}否则如果（用户通过长度<6）{
removeerror（'LoginForm[user_pass]”）；
验证（'LoginForm[user_pass]”，“最小长度应为6”）；
}else if（re_pass==''）{
removeerror（'LoginForm[user_pass]”）；
验证（“重新通过”，“需要重复密码”）；
}否则如果（用户通过！=重新通过）{
removeerror（“re_pass”）；
验证（'重新通过'，'密码不匹配'）；
}否则如果（dob==''）{
removeerror（“re_pass”）；
验证（'LoginForm_dob'，'dob是必需的'）；
}否则{
如果（tnc==false）{
document.getElementById（'tnc_check'）。innerHTML='请同意条款和条件'；
document.getElementById（“tnc\U检查”）.style.color=“红色”；
错误_required=false；
}否则{
error_required=true；
document.getElementById（“tnc\U检查”）.style.display=“无”；
删除错误（'LoginForm_dob'）；
}
}
}
函数验证（id、msg）{
document.getElementById（id）.style.border='4px实心红色'；
document.getElementById（id）.value=“”；
document.getElementById（id）.placeholder=msg；
错误_required=false；
}
函数删除错误（id）{
document.getElementById（id.style.border='none'；
error_required=true；
}

答案很简单。在事件后的表单中输入有效信息。一切都是你想要的

$（“#frm”）.submit（函数（e）{
if（$（this）.valid（））{
$（“.loading”）.css（“显示”、“内联”）；
}
})使用javascript检查表单提交或按钮提交事件的验证


if（$（'#MyForms'）.valid（）
{
//做某事（有效）
}
其他的
{
//做某事（无效）
}
您的意思是，如果没有验证错误，则应提交表单，如果有错误，该怎么办？是的，如果没有验证错误，则应提交表单并在处理过程中显示加载器，但如果有验证错误，则不应显示加载器，而只应显示验证。Unclear您的期望值。当您提交时，您立即离开页面。您的
$（“.loading”）.css（“display”、“inline”）有什么意义
-最多只显示一秒钟Hi Stephen，我所期望的是，如果显示模型验证，则加载程序不应该出现，只显示验证消息，如果没有vadalidations，则加载程序应该出现。上面的代码只是我这样显示加载程序的示例。提交时，加载程序是diPlay，我不会立即离开页面。在将记录保存到DB后，我就离开了。你不明白我的评论吗？一旦你提交，你就离开当前页面。你的“加载器”毫无意义。这与asp.net mvc有什么关系？是的，这就是答案。
var error_flag = true;
var error_required = true;

$('#btnSubmit').click(function(e){
    e.preventDefault();
    if(error_flag && error_required){
            $("#ajax-loader").css("display", "block");
           $('form#login-form').submit();
    }
});

function validateForm(){

var user_pass = document.getElementById('LoginForm[user_pass]').value;
var dob = document.getElementById('LoginForm_dob').value;
var re_pass = document.getElementById('re_pass').value;
var user_name = document.getElementById('LoginForm[user_name]').value;
var email = document.getElementById('LoginForm[email]').value;
var tnc = document.getElementById('checkbox1').checked;
// alert(tnc);
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

if(user_name == ''){
  validate('LoginForm[user_name]','Nick name is required.');
}else if(email == ''){
  removeerror('LoginForm[user_name]');
  validate('LoginForm[email]','Email is required.');
}else if(!filter.test(email)){
  removeerror('LoginForm[email]');
  validate('LoginForm[email]','Please enter valid email.');
}else if(user_pass == ''){
  // removeerror('LoginForm[email]');
  validate('LoginForm[user_pass]','Password is required.');
}else if(user_pass.length < 6){
  removeerror('LoginForm[user_pass]');
  validate('LoginForm[user_pass]','Min length should be 6.');
}else if(re_pass == ''){
  removeerror('LoginForm[user_pass]');
  validate('re_pass','Repeat password is required.');
}else if(user_pass != re_pass){
  removeerror('re_pass');
  validate('re_pass','Password does not match.');
}else if(dob == ''){
  removeerror('re_pass');
  validate('LoginForm_dob','Dob is required.');
}else{
  if(tnc == false){
    document.getElementById('tnc_check').innerHTML = 'Please agree Terms and Condition' ;
    document.getElementById("tnc_check").style.color = "red";
    error_required = false;
  }else{
    error_required = true;
   document.getElementById("tnc_check").style.display = "none";
   removeerror('LoginForm_dob');
  }
}
}
function validate(id,msg){
     document.getElementById(id).style.border='4px solid red';
     document.getElementById(id).value = "";
     document.getElementById(id).placeholder = msg;
     error_required = false;
}
function removeerror(id){
     document.getElementById(id).style.border='none';
     error_required = true;
}