在启用提交按钮之前检查字段是不是具有有效的类并且不为空？

Posted 2023-05-09

【中文标题】在启用提交按钮之前检查字段是不是具有有效的类并且不为空？

【英文标题】：Check if fields have valid class and are not empty before enabling submit button?在启用提交按钮之前检查字段是否具有有效的类并且不为空？

【发布时间】：2021-04-11 18:04:39

【问题描述】：

我之前问过这个问题没有运气，所以我用更好的措辞再次尝试，希望我能解决我的问题。

我一直在研究一个有几个输入的小表单，其中三个有正则表达式验证（email、number 和postcode）。我有一个功能可以在启用提交按钮之前检查表单中的所有字段是否都已填写，但是如果前面提到的字段无效（但已填写），该按钮仍将启用并允许提交。我希望在启用提交按钮之前尝试检查这些字段是否也有效。

我从早上 7 点开始一直在尝试，但没有运气，我尝试检查他们是否有 is-invalid 类来禁用按钮，我尝试实现 jQuery Validate 插件（我觉得它不是很有用），并且真的是碰壁了，不知道还能做什么。

我可以找到很多关于检查有效输入的答案，也可以找到很多关于检查表格是否完整填写的答案，但没有一个包含两者，我自己尝试过，但它不起作用。一如既往地感谢任何帮助。

这是我所拥有的：

// ~~~ phone number validation

function validateContact(number) 
  var re = /^(\+44\s?7\d3|\(?07\d3\)?)\s?\d3\s?\d3$/;
  return re.test(number);


function validateC() 
  var number = $("#number").val();

  if (validateContact(number)) 
    $("#number").removeClass("is-invalid");
    return true;
   else 
    alert('Please enter a valid phone number');
    $("#number").addClass("is-invalid");
  
  return false;


// ~~~ email validation

function validateEmail(email) 
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
  return re.test(email);


function validateE() 
  var email = $("#email").val();

  if (validateEmail(email)) 
    $("#email").removeClass("is-invalid");
    //        $("#submit").removeClass("toggle-disabled").prop("disabled", false);
    return true;
   else 
    alert('Please enter a valid email address.');
    $("#email").addClass("is-invalid");
    //        $("#submit").addClass("toggle-disabled").prop("disabled", true);
  
  return false;


// ~~~ postcode validation

function validatePostcode(postcode) 
  var re = /^[a-zA-Z]1,2[0-9][0-9A-Za-z]0,1 0,1[0-9][A-Za-z]2$/;
  return re.test(postcode);


function validateP() 
  var postcode = $("#postcode").val();

  if (validatePostcode(postcode)) 
    $("#postcode").removeClass("is-invalid");
    return true;
   else 
    alert('Please enter a valid postcode');
    $("#postcode").addClass("is-invalid");
  
  return false;


// ~~~ validate if form is filled completely, toggles submit & edit button

$(document).on('change keyup', '.required', function(e) 
  var disabled = true;
  // var isValid = false;

  $(".required").each(function() 
    var value = this.value;

    if ((value) && (value.trim() != '')) 
      disabled = false;
      $('.toggle-disabled').prop("disabled", false);
     else 
      disabled = true;
      $('.toggle-disabled').prop("disabled", true);
      return false;
    

  );

);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="col-md-6">
  <input type="email" class="input form-control required" id="email" onchange="validateE()" placeholder="Email Address" name="email">
</div>
<div class="col-md-6">
  <input type="tel" class="input number form-control required" id="number" onchange="validateC()" placeholder="Contact Number" name="Number" required>
</div>
<div class="col-md-6">
  <input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required>
</div>
<div class="col-md-6">
  <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【参考方案1】：

而不是&& 使用|| 因为这里如果任何一个条件是true 你需要禁用你的提交按钮。然后，添加一个额外的条件$(this).hasClass('is-invalid')) 用于检查输入是否有效。

演示代码：

// ~~~ phone number validation

function validateContact(number) 
  var re = /^(\+44\s?7\d3|\(?07\d3\)?)\s?\d3\s?\d3$/;
  return re.test(number);


function validateC() 
  var number = $("#number").val();

  if (validateContact(number)) 
    $("#number").removeClass("is-invalid");
    return true;
   else 
    alert('Please enter a valid phone number');
    $("#number").addClass("is-invalid");
  
  return false;


// ~~~ email validation

function validateEmail(email) 
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
  return re.test(email);


function validateE() 
  var email = $("#email").val();

  if (validateEmail(email)) 
    $("#email").removeClass("is-invalid");
    //        $("#submit").removeClass("toggle-disabled").prop("disabled", false);
    return true;
   else 
    alert('Please enter a valid email address.');
    $("#email").addClass("is-invalid");
    //        $("#submit").addClass("toggle-disabled").prop("disabled", true);
  
  return false;


// ~~~ postcode validation

function validatePostcode(postcode) 
  var re = /^[a-zA-Z]1,2[0-9][0-9A-Za-z]0,1 0,1[0-9][A-Za-z]2$/;
  return re.test(postcode);


function validateP() 
  var postcode = $("#postcode").val();

  if (validatePostcode(postcode)) 
    $("#postcode").removeClass("is-invalid");
    return true;
   else 
    alert('Please enter a valid postcode');
    $("#postcode").addClass("is-invalid");
  
  return false;


// ~~~ validate if form is filled completely, toggles submit & edit button

$(document).on('change keyup', '.required', function(e) 
  var disabled = true;
  $(".required").each(function() 
    var value = this.value;
    //using or also added hasclass('is-invalid')
    if (!(value) || (value.trim() === '') || ($(this).hasClass('is-invalid'))) 
      disabled = false;
      $('.toggle-disabled').prop("disabled", true);
    
  );
  //check disabled if true then also enabled.
  if (disabled) 
    $('.toggle-disabled').prop("disabled", false);
  

);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="col-md-6">
  <input type="email" class="input form-control required" id="email" onchange="validateE()" placeholder="Email Address" name="email">
</div>
<div class="col-md-6">
  <input type="tel" class="input number form-control required" id="number" onchange="validateC()" placeholder="Contact Number" name="Number" required>
</div>
<div class="col-md-6">
  <input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required>
</div>
<div class="col-md-6">
  <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>