按钮被禁用，同时必填字段为空

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

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

问候

来源

2016-08-01 doe

感谢downvoting没有说明任何理由。 – doe

禁用按钮，让每个输入都有一个'onchange'事件或类似的东西，并检查所有的输入是否都是空的，然后删除禁用，否则添加/保留它（*将它作为单独的函数*添加）。你也想在提交事件上做同样的事情。 –

我还没有倒票，但我可以看到为什么。从你们似乎没有试图自己解决问题的事实开始。如果你有，包括你的代码。 –

使用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

来源

2016-08-01 06:46:19 remdevtec

@doe这不是你知道的通用名称.. –

我不是我的桌面上，但现在，我提供你只是一个基本的布局，你需要做的..如果您在comment..don需要更多帮助提”什么不要忘记勾号。

<!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>

来源

2016-08-01 06:30:30

这与问题无关。他希望禁用**按钮，直到表单有效。 –

我用我的另一个帐户回答了其他一些家伙的问题。 –

我看到..我改说 –

我张贴在这里，由于一个简单的演示，我不希望在模板中潜水。

逻辑很简单。您需要“聆听”输入事件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>

来源

2016-08-01 06:44:41

所有输入字段不能为空，不能只有一个。 –

你不希望我为你模拟所有的输入。答案只是一个方向。 –

尝试战时HTML和JavaScript代码：

<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了解更多信息。

来源

2016-08-01 07:09:14

按钮被禁用，同时必填字段为空

回答

相关问题