CODEWITHSUNDEEP
javascripthtml
Coder123
Coder123

Reputation: 854

js validation (from html input) issue

im trying to validate that the input in 2 input fields in html are only chars, if not i want to show user a massege, im using html and js:
html:

  Player one name: <input type="text" id="firstname" maxlength="20"><br>
  Player two name: <input type="text" id="secondname" maxlength="20"><br>
  <input type="submit" value="Submit" id="submitBtn" onclick="insertNames();"/>

js:

function insertNames()
{
    var nameOne = document.getElementById("firstname").value; //saves values
    var nameTwo = document.getElementById("secondname").value;
    var letters = /^[A-Za-z]+$/;   
    if(nameOne == "" || nameTwo == "" || !(nameOne.match(letters)) || !(nameTwo.match(letters))&& (nameOne == nameTwo)){
    if( nameOne == nameTwo )
        alert("Please enter only characters.")
        break;
    }else
         console.log("ok");
}

when im trying to enter strings with numbers it does not print to the console but neither does show the window alert, what am i doing wrong?
thanks!

Upvotes: 1

Views: 49

Answers (3)

Steve Padmore
Steve Padmore

Reputation: 1740

Below is what I think you want. This takes care of the original issue, handles when the names are the same, when digits are included, and finally posts back to the server when valid, otherwise does not post and will display alerts accordingly. Also, see the javascript comments about when alerts and console outputs are applicable...

        function insertNames() {
          var nameOne = document.getElementById("firstname").value; //saves values
          var nameTwo = document.getElementById("secondname").value;
          var letters = /^[A-Za-z]+$/;
          if (nameOne == nameTwo) {
            alert('Entries are the same');
            return false;
          } else
          if (nameOne == "" || nameTwo == "" || !(nameOne.match(letters)) || !(nameTwo.match(letters))) {
            alert("Please enter only characters.");
            return false;
          } else {
            // You will not see this if the page will be submitted when successful (except in Fiddle)...
            console.log("ok");
          }
          return true;
        }

         // Used for debugging - to show page has loaded from server (not in Fiddle).
        alert('Page loaded from server');
<form>
  Player one name:
  <input type="text" id="firstname" maxlength="20">
  <br>Player two name:
  <input type="text" id="secondname" maxlength="20">
  <br>
  <input type="submit" value="Submit" id="submitBtn" onclick="return insertNames();" />
</form>

Upvotes: 0

Edoardo L&#39;Astorina
Edoardo L&#39;Astorina

Reputation: 7285

Change your if statement to this:

if( nameOne === "" || nameTwo === "" || !(nameOne.match(letters)) || !(nameTwo.match(letters)) ) {
  alert("Please enter only characters.")
} else {
  console.log("ok");
}

That will check for only characters in your nameOne and nameTwo variables.

Then make a separate statement:

if( nameOne === nameTwo ) {
  alert( "Player names are identical!" );
} else {
  console.log( "ok" );
}

Very important: note that I used THREE equal signs, not two. That's called a strict comparator and also checks for types. More here

Upvotes: 2

Ali Shan
Ali Shan

Reputation: 636

Please update your function it have some bugs in conditions

function insertNames() {
    var nameOne = document.getElementById("firstname").value; //saves values
    var nameTwo = document.getElementById("secondname").value;
    var letters = /^[a-zA-Z]*$/;   
    if(nameOne == "" || nameTwo == "" || !(nameOne.match(letters)) || !(nameTwo.match(letters)) || (nameOne == nameTwo)){
        alert("Please enter only characters.");
    } else {
        console.log("ok");
    }
}

Upvotes: 1

Related Questions