Form Validation Vanilla JS

Question

I'm building a multipage form and I have some unusual validation requirements. Here's what I'd like to do/what I have done so far.

What I Want to Do:

(1) As each form field is filled in, I want a function to run and check that the user-input has met certain conditions -- i.e. for first and last name, that there are no numbers and there is a space in between the names.

(2) Once each of the field are full and have passed as true, I want another function to run that re-enabled a previously disabled "Next" button that will move the user to the next page of the form.

What I Have Done

(1) Created a mini version of the form with two inputs:

1. One that takes a first name, a space and a last name
2. One that takes a phone number set up the following way xxx xxx xxx

(2) I've console.logged the results with pass/fail logic so I know when certain things are being input by the user, that the code is validating properly.

Where I am Stuck:

I do not know how to create the secondary code that will reenabled the previously disabled "next" button that will move the form to the next page.

What I would like to do is make it so when the "Next" button is reenabled, and clicked on, it's own onclick function hides the current page, looks for the next page in the sequence and changes its display:block and I believe I have that code worked out separately, but I don't know how to integrate it with my other needs.

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 上使用而不是在 blur 上使用可能对用户更友好，因为我认识的大多数用户都会尝试单击禁用的按钮，而不是按 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>