CODEWITHSUNDEEP
javascripthtml
Sakthivel
Sakthivel

Reputation: 666

JavaScript: Form value is not being validated during submit

On this code, while i try to submit the form, am doing some validation on the input boxes, if the user-name input box value less than 6 and if there is no value, then, i am alerting alert("dshddhhdhdhh");. While I press the submit button, this alert is not working. Where is the mistake? Please.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    </head>
  <body>

    <form name="loginForm" method="post">
    <input type="text" name="user-name" placeholder="Firstname Lastname"/>
    <span class="user-name">Name should not be empty</span>
    <input type="password" name="password" placeholder="Password"/>
    <input type="password" name="password1" placeholder="Confirm password"/>
    <span class="password1">Password does not be match</span><span class="password">Password does not be match</span>
    <input type="email" name="email" placeholder="Email" required/>
    <input type="url" name="url" placeholder="Website"/>
    <span class="url">Invalid Website URL</span>
    <input name="submit" type="submit" value="Submit"/>
    </form>

<script type="text/javascript">    

window.onload = function(){
document.getElementsByName("user-name")[0].value="";
document.getElementsByName("password")[0].value="";
document.getElementsByName("password1")[0].value="";
document.getElementsByName("email")[0].value="";
document.getElementsByName("url")[0].value="";
document.getElementById("FormSubmit").style.display="none";
document.querySelector('span[class="user-name"]').style.display="none";
document.querySelector('span[class="password"]').style.display="none";
document.querySelector('span[class="password1"]').style.display="none";
document.querySelector('span[class="url"]').style.display="none";

document.getElementsByName("user-name")[0].focus();
}

var formElem = document.getElementsByName("loginForm")[0];
formElem.onsubmit = function(){
var returnValue=true;
if (loginForm.user-name.value.length < 6 ){
returnValue = false;
alert("dshddhhdhdhh");
return returnValue;
}
}</script>

  </body> 
</html>

Upvotes: 0

Views: 65

Answers (1)

Paul Roub
Paul Roub

Reputation: 36458

Your form element is named user-name, but you're checking username. Change

if (loginForm.username.value.length < 6 ){

to

if (loginForm['user-name'].value.length < 6 ){


window.onload = function(){
  document.getElementsByName("user-name")[0].value="";
  document.getElementsByName("password")[0].value="";
  document.getElementsByName("password1")[0].value="";
  document.getElementsByName("email")[0].value="";
  document.getElementsByName("url")[0].value="";
  document.getElementById("FormSubmit").style.display="none";
  document.querySelector('span[class="user-name"]').style.display="none";
  document.querySelector('span[class="password"]').style.display="none";
  document.querySelector('span[class="password1"]').style.display="none";
  document.querySelector('span[class="url"]').style.display="none";

  document.getElementsByName("user-name")[0].focus();
}

var formElem = document.getElementsByName("loginForm")[0];
formElem.onsubmit = function(){
  var returnValue=true;
  if (loginForm['user-name'].value.length < 6 ){
    returnValue = false;
    alert("dshddhhdhdhh");
    return returnValue;
  }
}
<form name="loginForm" method="post">
    <input type="text" name="user-name" placeholder="Firstname Lastname"/>
    <span class="user-name">Name should not be empty</span>
    <input type="password" name="password" placeholder="Password"/>
    <input type="password" name="password1" placeholder="Confirm password"/>
    <span class="password1">Password does not be match</span><span class="password">Password does not be match</span>
    <input type="email" name="email" placeholder="Email" required/>
    <input type="url" name="url" placeholder="Website"/>
    <span class="url">Invalid Website URL</span>
    <input name="submit" type="submit" value="Submit"/>
</form>

Upvotes: 3

Related Questions