javascript - Mvc 验证和加载器

Question

在 MVC View 中的表单发布方法中， 如果验证触发，则加载程序不应出现并仅显示验证 否则没有验证触发，然后加载程序应该来保存数据。

我尝试过的:

在 javascript 中将加载器放在表单提交上并禁用按钮。

$("#frmContact").submit(function (e) {
        $(".loading").css("display", "inline");
    });

1) 加载器:问题是如果验证触发，加载器也会随着验证一起出现，然后需要重新加载页面和输入数据。

2) 禁用提交按钮:如果我在单击时禁用提交按钮，并且如果验证触发，则按钮保持禁用状态而不是启用状态。因此，如果存在验证，则启用该按钮，如果未触发验证，则禁用该按钮。

所有这一切都是为了避免重复输入，就好像按钮在用户点击提交时启用一样。

Answer 1

你可以这样做

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();">

在脚本中:(在这里您可以更改字段...我正在展示我的示例之一)

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;
}