Question

我使用this模板表单。对于文本输入，它提供了验证输入的机会（简单：如果它是空的，红色框，如果它不是，绿色框）。但是，我希望我的提交按钮（下面的标记）只有在所有必填字段至少不为空时才可点击。

<button type="submit" name="finish" class="waves-effect waves-light btn">

此致

Answer 1

我在这里发布了一个简单的演示，因为我不想在模板中潜入。

逻辑很简单。您需要“收听”输入的事件change和keypress，然后检查它是否有效（我测试了上一个Chrome中的代码，需要在其他浏览器中检查此验证API或创建自己的，或使用图书馆）。如果是，请删除属性disabled，如果没有，请添加它。

var inputs = document.querySelectorAll('input'),
    button = document.querySelector('button');

addListenerMulti(inputs, 'keyup change', function() {
  if (valid()) {
    button.removeAttribute('disabled');
  }
  else {
    button.setAttribute('disabled', 'disabled');
  }
});

function valid() {
  var valid = true;
  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].validity.valid) {
      valid = false;
    }
  }
  return valid;
}

function addListenerMulti(el, s, fn) {
  var col = el.length ? el : [el];
  var evts = s.split(' ');

  for (var k = 0; k < col.length; k++) {
    for (var i = 0, iLen = evts.length; i < iLen; i++) {
      col[k].addEventListener(evts[i], fn, false);
    }   
  }  
}

<form>
  <input type="text" required /><br />
  <input type="text" required /><br />
  <button disabled>Submit</button>
</form>

Answer 2

使用oninput立即反映输入的变化并检查输入是否为空。

HTML

    <form id="frm">
      <input type="text" name="input1" oninput="testFinish();" />
      <input type="text" name="input2" oninput="testFinish();" />
      <button type="submit" name="finish" disabled onsubmit="alert('SUBMITTED')">Finish</button>
    </form>

JAVASCRIPT

function testFinish(){
var frm = document.getElementById('frm');
if (frm['input1'].value && frm['input2'].value)
  frm['finish'].disabled = false;
}

JsFiddle

Answer 3

我现在不在我的桌面上，但是我只为你提供了你需要做的基本布局..如果你需要在评论中提供更多帮助，请忘记打勾。

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Can Validate Input</h1>
    <p>Please input a number between 1 and 10:</p>
    <input id="numb">
    <button type="button" onclick="myFunction()">Submit</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        var x, text;

        // Get the value of the input field with id="numb"
        x = document.getElementById("numb").value;

        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
          text = "Input not valid";
        } else {
          text = "Input OK";
        }
        document.getElementById("demo").innerHTML = text;
      }
    </script>
  </body>
</html>

＆＃13;

Answer 4

尝试使用bello HTML和javascript CODE：

<form id="my-form">
  <input type="text" name="input1" class="required abc" />
  <input type="text" name="input2" class=" abc" />
  <input type="text" name="input3" class="required abc" />
  <input type="text" name="input4" class=" abc" />
  <input type="text" name="input5" class="abc" />
  <button type="submit" name="finish" onsubmit="alert('SUBMITTED')">Finish</button>
</form>

Java脚本代码：

$(document).ready(function(){
    $("form input").blur( function(){
        var has_error = false;
        $("form input.required").each(function(){
            if($(this).val() == ''){
                $(this).css('border','1px solid red');
                has_error = true;
            }
            else{
                    $(this).css('border','');
            }
        });
        if(has_error == false){
            $("form button[name='finish']").prop('disabled', false);
        }
        else {
                $("form button[name='finish']").prop('disabled',true);
        }
    });
});

查看Fiddle了解详情。

必填字段为空时禁用按钮

4 个答案: