Question

我有一个简单的表格。我已经尝试禁用提交按钮，直到填写了字段，但它似乎无法正常工作。任何人都可以指出我正确的方向我做错了。

<form id="casmansForm">
  Name: <input type="name" id="userName" class="inputs"><br>
  Email: <input type="name" id="userName" class="inputs"><br>
  Text: <input type="name" id="userName" class="inputs"><br>
  <input type="submit" id="userSubmit" disabled><br>
</form>
<div id='alertMessage'></div>

var userName = document.getElementById('userName');
var userEmail = document.getElementById('userEmail');
var userText = document.getElementById('userText');
var userSubmit = document.getElementById('userSubmit');
var alertMessage = document.getElementById('alertMessage');

function checkForm(){
  if(userName.value == "" || userEmail.value == "" || userText.value == "") 
{
    alertMessage.innerHTML = 'Please fill in form correctly';
    userSubmit.disabled = true;
    return false;
  } else {
    alertMessage.innerHTML = 'Thank you for filling in form';
    userSubmit.disabled = false;
    return true;
  }
}

userName.addEventListener("blur",checkForm,false);
userEmail.addEventListener("blur",checkForm,false);
userText.addEventListener("blur",checkForm,false);

Answer 1

您的主要问题是您在多个元素上使用了相同的id。 id在文档中必须是唯一的。

此外，return false在此上下文中没有为您做任何事情。

最后，如果您不提供任何HTML，请不要使用.innerHTML，而是使用textContent。

var userName = document.getElementById('userName');
var userEmail = document.getElementById('userEmail');
var userText = document.getElementById('userText');
var userSubmit = document.getElementById('userSubmit');
var alertMessage = document.getElementById('alertMessage');

function checkForm(){
  if(userName.value == "" || userEmail.value == "" || userText.value == "") {
    alertMessage.textContent = 'Please fill in form correctly';
    userSubmit.disabled = true;
  } else {
    alertMessage.textContent = 'Thank you for filling in form';
    userSubmit.disabled = false;
  }
}

userName.addEventListener("blur",checkForm,false);
userEmail.addEventListener("blur",checkForm,false);
userText.addEventListener("blur",checkForm,false);

<form id="casmansForm">
  Name: <input type="name" id="userName" class="inputs"><br>
  Email: <input type="name" id="userEmail" class="inputs"><br>
  Text: <input type="name" id="userText" class="inputs"><br>
  <input type="submit" id="userSubmit" disabled>
</form>

<div id='alertMessage'></div>

禁用表单按钮

1 个答案: