HTML Form and JavaScript validation isnt working

javascript form validation
javascript onsubmit form validation
javascript validation not working
html5 form validation javascript
javascript form validation example download
javascript form validation without submit button
jquery form validation
html required not working

JavaScript validation not occurring correctly. Form submits anyway without checking the issue

I've tried changing from getElementByID.value; and document.form[][].value;

Tried changing my javascript to do it on my function init(); but also in HTML obsubmit attribute.

Really confused on what im doing wrong

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("Username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
  }
}
<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>

You don't need e.preventDefault(), you just need to use return false in all the validation failures.

getElementById("Username") should be getElementById("username"), since IDs are case-sensitive.

Your email regexp test is backwards, you want to report an error if it doesn't match.

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.getElementById("email").value;
  if (!email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
    return false;
  }
}
<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
</form>

Why does 'required' not work in HTML?, doesn't use any of these things on it's own. Form validation using HTML and JavaScript Forms are used in webpages for the user to enter their required details that are further send it to the server for processing. A form is also known as web form or HTML form.

Here's the working code:

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
  }

  return false;
}

I removed function argument and added return false so form submit action doesn't happen. Also fixed uppercase Username to username to match your html

Only thing changed in html is onsubmit function call to have no arguments as it was removed from javascript:

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
  </form>

JavaScript - Form Validation, This is more of a web development question and not related to Salesforce. If you want to run some JS code upon clicking of the submit button  HTML form validation can be done by JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted: JavaScript Example

maybe you should have a look on this code:

const MyForm   = document.querySelector('form[name=register]')
    , ErrorMsg = document.querySelector('#errMsg')

ErrorMsg.style.padding = "10px";  // better to do this with some CSS
const emailRE = "@";              // see regex for futur ?

MyForm.onsubmit=e=>  // regValidate()
{
  e.preventDefault()  // just for testing here 

  if (!MyForm.email.value.match(emailRE) || MyForm.email.value.length < 6)
  {
    ErrorMsg.textContent = "Please enter a valid email";
    return false;
  }
  if (MyForm.username.value.length < 5) {
    ErrorMsg.textContent = "Please enter a valid username";
    return false;
  }

  console.log('form is OK')
}
MyForm.onreset=_=>
{
  MyForm.email.style.width    = '110px'
  MyForm.username.style.width = '140px'
  ErrorMsg.innerHTML          = '&nbsp;'
}

MyForm.email.addEventListener('input', function() {
  this.style.width = `${(this.value.length +1) *8}px`
})
MyForm.username.addEventListener('input', function() {
  this.style.width = `${(this.value.length +1) *8}px`
})
<form name="register" action="XXX" method="post" >
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg">&nbsp;</div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" style="width:110px" value="" >
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" style="width:140px" value="" >
  </p>
  <p>
    <button type="submit">submit</button><br>
    <button type="reset">reset</button>
  </p>
</form>

Form validation isn't working when submitting it using Javascript , php). Now the form won't validate and it just posts the form regardless of what values are inputted into the form. Thanks. HTML <  In some cases, such as legacy browser support or custom controls, you won't be able to or won't want to use the Constraint Validation API.You're still able to use JavaScript to validate your form, but you'll just have to write your own.

i changes a few lines your codes, you can't use e.preventDefault() in onsubmit event, because you used "return reg Validate()". its waited bool variable from regValidate()

 <!DOCTYPE html>
<html>
<body>

<p>When you submit the form, a function is triggered which alerts some text.</p>

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
  </form>

<script>
function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
    return false;
  }

  return true;
}
</script>

</body>
</html>

Form validation not working - JavaScript, Javascript form & email validation not working · JavaScript URI: file:///C:/Users/​williamtosh/Desktop/javascriptvalid.html. This is my code If you want to run some JS code upon clicking of the submit button then your javascript method should return true or false based on the form validation. HTMLFormElement provides checkValidity method and it returns true or false based on the form validity. Here is a simple solution for the problem you are facing:

Javascript form & email validation not working - JavaScript, Automatic HTML form validation does not work in Internet Explorer 9 or earlier. Data Validation. Data validation is the process of ensuring that user input is clean​,  Validation is an important part of working with HTML forms. Unfortunately, not every browser provides support for the validation features of HTML5. The example you find here won’t work with Internet Explorer because Internet Explorer fails to support any of the HTML5 validation features. A large part of validating data in HTML5 is creating the …

JavaScript Form Validation, In this tutorial we'll build a simple form with client-side JavaScript validation. Now let's take a look at the JavaScript form validation function that does the actual work the browser that we are writing some JavaScript, and the HTML comment ( <! If the user has not completed more than one field, then they will see an alert  Server Validation. The HTML5 form validation techniques in this post only work on the front end. Someone could turn off JavaScript and still submit jank data to a form with the tightest JS form validation. To be clear, you should still do validation on the server. How you display those errors to a user is up to you.

Form Validation with JavaScript, Client-side form validation sometimes requires JavaScript if you want "Please enter a valid email address" (the data you entered is not in the right format). Our applications won't work properly if our users' data is stored in the Find the source code on GitHub at fruit-start.html and a live example below. Contact form in JavaScript is one piece of websites that you will get to know as a web developer. This is a common place for users of a website to start a conversation with seller or author, company, freelancer….

Comments
  • return regValidate(e) there's no variable e, it should be event.
  • And the regValidate() function is missing the e parameter.
  • The function doesn't have return false; when the username validation fails.
  • I put the event in there after following a different stackoverflow tutorial, i removed both it and it still doesnt work
  • Oooh thats a good point for the username field, however, i was testing with an email length less than 6 and it was still not working
  • Where is the validation?
  • Sorry i forget that, i added my post
  • You should explain what was wrong with the original code, and how your answer fixes it. But your code is completely different, it's hard to see how it really applies.
  • hmm, okay i changed my post