js validation (from html input) issue

Question

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!

Are these elements within a `
`? If so, when the function is done, the `
` will likely perform its normal behavior, navigating to another page or a fresh copy of the current page. Some consoles will by default clear the log on navigation. Make sure you've set it to keep them. — Jonathan Lonowski, Oct 17 '15 at 20:56
yeah, i would like it to show alert or log (which of them is true..), but it does not show the alert, @JonathanLonowski yes thank, i deleted the break; but it still doesnt show the alert — Coder123, Oct 17 '15 at 21:02

score 2 · Answer 1 · edited May 23 '17 at 11:58

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

score 1 · Accepted Answer · answered Oct 17 '15 at 20:59

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");
    }
}

score 0 · Answer 3 · answered Oct 17 '15 at 21:36

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>

js validation (from html input) issue

3 Answers3