Question

我有一个jQuery验证表单正在运行。在您完成表单之前，将禁用提交按钮。完成表单后，将启用提交按钮。

我的问题是有些用户不明白“禁用”按钮是什么，并尝试点击。出于这个原因，我需要在禁用时将按钮的文本标签更改为“首先填写表单！”当按钮启用“发送表格”时再次更改

我试过了：

$('#form input').on('change', function() {
  if ($('#form').valid()) {
    $(":submit").html('<i class="fas fa-thumbs-up"></i> SEND FORM');
  } else {
    $(":submit").html('<i class="fas fa-edit"></i> FILL THE FORM FIRST');           
  }
});

然而这不起作用，在IE11中我有一个“更改”的错误，按钮开始“闪烁”FontAwesome。

我不是jQuery的专家，但也许会有所作为：

if $(":submit").prop('disabled', false);
{
  $(":submit").html('<i class="fas fa-thumbs-up"></i>  SEND FORM');
} else {
  $(":submit").html('<i class="fas fa-edit"></i>  FILL THE FORM FIRST');
}

当然，正如我所说，我不是jQuery的专家，这也不行。有什么想法吗？

Answer 1

您可能希望在输入中使用required属性如果未填写输入，则会阻止表单发送请注意，您也可以使用占位符来显示所需的内容。

请参阅代码段：

<form>
  First name:<br>
  <input type="text" name="firstname" placeholder="John" value="" required>
  <br>
  Last name:<br>
  <input type="text" name="lastname" placeholder="Doe" value="" required>
  <br>
  Gender:<br>
  <input type="text" name="lastname" placeholder="(Optional)" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

文档：https://www.w3schools.com/tags/att_input_required.asp

我不确定消息是否有用，但无论如何...... 您可以使用一些JS并执行以下操作：

function validateForm() {
  var isValid = true;

  // Note that I check only the "required" fields here
  $('[required]').each(function() {
    if ( $(this).val() == '' )
        isValid = false;
  });
  
  if(isValid){
    $(":submit").html('<i class="fas fa-thumbs-up"></i> SEND FORM');
  }else{
    $(":submit").html('<i class="fas fa-edit"></i>  FILL THE FORM FIRST');
    $("form").on('keyup', validateForm);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<form>
  First name:<br>
  <input type="text" name="firstname" value="" required>
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="" required>
  <br><br>
  <button type="submit" onclick="validateForm();">Submit</button>
</form>

希望它有所帮助。

根据禁用/启用状态的备用按钮文本

1 个答案: