Breaking News: Grepper is joining You.com. Read the official announcement!

disable submit button until form is fully validated

Add Answer

Sore Seahorse answered on November 21, 2020 Popularity 8/10 Helpfulness 1/10

answer disable submit button until form is fully validated

related javaScript disable submit button until form is fully validated

related disable submit button after form validation

disable submit button until form is fully validated

Comment

let inputs = document.querySelectorAll('input');
let buttonSend = document.getElementById('button-send');

//"name" parameter of input field: boolean if validated 
let inputValidator = {
  "username": false,
  "email": false,
  "password": false
}

inputs.forEach((input) => {
  input.addEventListener('input', () => {
    let name = event.target.getAttribute('name');
    let regex = new RegExp(event.target.pattern || ".*");
    //if you specified a pattern for an input field it will check if the 
    //value matches it
    //if not it will match it with ".*" which stands for everything
    if (event.target.value.length > 0 && regex.test(event.target.value)) {
      inputValidator[name] = true;
    } else {
      inputValidator[name] = false;
    };

    let allTrue = Object.keys(inputValidator).every((item) => {
      return inputValidator[item] === true
    });

    if (allTrue) {
      buttonSend.disabled = false;
    } else {
      buttonSend.disabled = true;
    }
  })
})

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: disable javascript submit-button

Link to this answer
Share Copy Link

Contributed on Jul 10 2022

Sore Seahorse

0 Answers Avg Quality 2/10

Closely Related Answers

javaScript disable submit button until form is fully validated

Comment

function fieldValidation() {

var name = document.forms['RegForm']['Name'].value;
var address = document.forms['RegForm']['Address'].value;
var email = document.forms['RegForm']['EMail'].value;
var password = document.forms['RegForm']['Password'].value;
var telephone = document.forms['RegForm']['Telephone'].value;
var job = document.forms['RegForm']['Job'].value;
var comment = document.forms['RegForm']['Comment'].value;
var fullName = /^[a-zA-Z]+ [a-zA-Z]+$/;
var phnFormat = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/;

if (name === '') {
  alert('Please enter your name.'); 
  return false;
}

if (!fullName.test(name)) {
  alert('Please make sure we have your full name.');
  return false;
}

if (address === '') { 
  alert('Please enter your address.'); 
  return false; 
} 

if (email === '') { 
  alert('Please enter your e-mail address.'); 
  return false; 
} 

if (password === '') { 
  alert('Please enter a password.'); 
  return false; 
}   

if (telephone === '') { 
  alert('Please enter your telephone number.'); 
  return false; 
}

if (!phnFormat.test(telephone)) {
  alert('Please enter your phone number in the following format: (123) 555-1212)');
  return false;
}

if (job.value === '') { 
  alert('Please select a job choice.'); 
  return false; 
} 

if (comment.value === '') { 
  alert('Please enter a comment.'); 
  return false; 
}
  return true;
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: disable

Link to this answer
Share Copy Link

Contributed on Nov 21 2020

Famous Falcon

0 Answers Avg Quality 2/10

disable submit button after form validation

Comment

<form action="#" method="post" id="myform" name="myform">
    Location: <input name="location" type="text" />
    Site: <input name="site" type="text" />
    Age: <input name="age" type="text" />
    Gender <input name="gender" type="text" />
    <input name="button" type="submit" class="myButton" id="button" value="Submit" />
</form>

Popularity 9/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: disable

Link to this answer
Share Copy Link

Contributed on Sep 27 2021

Terrible Teira

0 Answers Avg Quality 2/10

disable submit button until form is fully validated

Contents

More Related Answers

disable submit button until form is fully validated

Closely Related Answers

javaScript disable submit button until form is fully validated

disable submit button after form validation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.