Question

我正在构建一个多页表单，我有一些不寻常的验证要求。这就是我想做的事情/我到目前为止所做的事情。

我想做的事：

（1）当填写每个表单字段时，我想要一个函数来运行并检查用户输入是否满足某些条件 - 即对于名字和姓氏，没有数字并且有空格在名字之间。

（2）一旦每个字段都已填满并且传递为true，我想要运行另一个函数，重新启用先前禁用的“下一步”按钮，该按钮将用户移动到表单的下一页。 / p>

我做了什么

（1）使用两个输入创建了一个迷你版本的表单：

一个带名字，空格和姓氏的人
使用以下方式设置电话号码的人xxx xxx xxx

（2）我通过通过/失败逻辑console.logged结果，所以我知道用户输入某些东西时，代码是否正确验证。

我被困的地方：

我不知道如何创建辅助代码，该代码将重新启用先前禁用的“下一步”按钮，该按钮会将表单移动到下一页。

我想要做的是，当重新启用“下一步”按钮并点击时，它自己的onclick功能会隐藏当前页面，查找序列中的下一页并更改其display:block我相信我的代码是单独制定的，但我不知道如何将其与其他需求相结合。

function checkForm()
{
	var firstName = document.getElementById("name").value;
	
	var phone = document.getElementById("phone").value;
	

	
	function checkFirstName()
	{
		if(firstName == "" || !isNaN(firstName) || !firstName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/))
	{
		console.log("Put a first Name and Last Name");
	}
	else
	{
		console.log("Thank You");
	}

	};
	
	checkFirstName();
	
	function checkPhoneNumber()
	{
		if(!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/))
			 {
			 console.log("Please Put in a proper phone number");
			 }
	else
	{
		console.log("Thank you");
		cansubmit = true;
	}
	};
	checkPhoneNumber();
	
};

<form>
First Name: <input type="text" id="name" onblur="checkForm()" /><label id="nameErrorPrompt"></label>
	<br />

	Phone Number: <input type="text" id="phone" onblur="checkForm()" /><label></label>
	<br />
	
	<button id="myButton" disabled="disabled">Test Me</button>
</form>

Answer 1

见下面的代码。

使用keyup而不是onblur可能更加用户友好，因为我认识的大多数用户都会尝试点击禁用按钮，而不是按Tab键或关注其他元素。

function checkForm() {
  var firstName = document.getElementById("name").value;

  var phone = document.getElementById("phone").value;

  var phoneCanSubmit, nameCanSubmit = false;

  function checkFirstName() {
    if (firstName == "" || !isNaN(firstName) || !firstName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {
      nameCanSubmit = false;
      console.log("Put a first Name and Last Name");
    } else {
      nameCanSubmit = true;
      console.log("Thank You");
    }

  };

  checkFirstName();

  function checkPhoneNumber() {
    if (!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/)) {
      phoneCanSubmit = false;
      console.log("Please Put in a proper phone number");
    } else {
      phoneCanSubmit = true;
      console.log("Thank you");
      cansubmit = true;
    }
  };
  checkPhoneNumber();
  if (nameCanSubmit && phoneCanSubmit) {
    document.getElementById("myButton").disabled = false;
  } else {
    document.getElementById("myButton").disabled = true;
  }
};

<form>
  First Name:
  <input type="text" id="name" onblur="checkForm()" />
  <label id="nameErrorPrompt"></label>
  <br />Phone Number:
  <input type="text" id="phone" onblur="checkForm()" />
  <label></label>
  <br />

  <button id="myButton" disabled="disabled">Test Me</button>
</form>

Answer 2

以下代码为您提供所需内容。我删除了一些无关的检查以简化代码，并将事件处理程序从HTML移动到JavaScript。我还从较大的 checkForm 函数中取出了字段检查。这为您提供了灵活性，以便在需要时使用它们。

window.addEventListener('load', function(e) {
    var nameInput = document.getElementById('name');
    var phoneInput = document.getElementById('phone');
    var myButton = document.getElementById('myButton');

     myButton.addEventListener('click', function(e) {
        e.preventDefault(); //Stop the page from refreshing
         getNextPage('Next page shown!!');
    }, false);

    nameInput.addEventListener('blur', function(e) {
        checkName(this.value);
    }, false);

    phoneInput.addEventListener('blur', function(e) {
        //Uncomment below to make this responsible only for checking the phone input
        //checkPhoneNumber(this.value);
        /*You could do away with diasbling and check the form 
        on submit, but if you want to keep the disable logic
        check the whole form on the blur of the last item*/
        checkForm();
    }, false);
}, false);

function getNextPage(foo) {
    console.log('Callback fired: ', foo);
    //Do something here
}

function checkPhoneNumber(phone) {
    if(!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/)) {
         console.log("Please Put in a proper phone number");
        return 0;
    }
    else {
        console.log("Thank you name entered");
        return 1;
    }
};

//Removed a bit of over coding, no ned to check isNaN or empty string since using regex already
function checkName(firstAndLastName) {
    if(!firstAndLastName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {
        console.log("Put a first Name and Last Name");
        return 0;
    }
    else {
        console.log("Thank You phone entered");
        return 1;
    }

};

function checkForm() {
    var validCount = 0;
    fieldCount = document.forms[0].elements.length - 1; //substract one for the submitbutton!
    var phoneNum = document.getElementById('phone').value;
    var name = document.getElementById('name').value;
    var myButton = document.getElementById('myButton');

    validCount += checkPhoneNumber(phoneNum);
    validCount += checkName(name);
    console.log(validCount + ' of ' + fieldCount + ' fields are valid');
    if (validCount > 0 && validCount === fieldCount) {//Compare the inputs to the number of valid inputs 
        myButton.disabled = false;
    }
    else {
        myButton.disabled = true;
    }
}

HTML

<form>
    First Name: <input type="text" id="name" /><label id="nameErrorPrompt"></label>
    <br />
    Phone Number: <input type="text" id="phone" /><label></label>
    <br />

    <button id="myButton" disabled="disabled">Test Me</button>
</form>

Answer 3

如何开始为每个输入设置onblur返回一个布尔值，指示该字段是否有效。

然后在checkForm函数中设置一个cansubmit变量（= checkName＆amp;＆amp; checkPhone），然后再继续 - 那么你不需要启用和禁用该按钮。

如果你真的想让按钮启用你可以使用相同的模式，但是

document.getElementById("myButton").disabled = !canSubmit;

并且您总是希望像现在一样在场模糊上调用checkForm。

另请注意，您现在没有确定当地的canSubmit。

表格验证香草JS

3 个答案: