2


Hope, you all doing well.

I am trying to validate firstname input field of a form with Javascript. For some reason, error messages doesn't display in order. Some of them override others, only just one error message is displaying, the rest is not.

I'm wondering why? Can anyone shed me some light please?

Here is my code:

// Predefined validator function to check if input is empty or not

var validator = {};
validator.isEmpty = function(input) {
    // Stop execution if input isn't string
    if (typeof input !== 'string') return false;
                
    if (input.length !== 0) {
        for (var i = 0; i < input.length; i++) {
            if (input[i] !== " ") {
                return false;
            }
            return true;
        }
    }
    return true;
};
validator.isEmpty(null); // returns false
        
// Main part to get inputs and apply validation
window.onload = function() {
var signUp = document.getElementById("signUp");
var fName =  document.getElementById("fName");
var suButton = document.getElementById("subMit");
          
// Submit button on the function
suButton.addEventListener('click', function(event) {
    isNameValid(fName);
});
          
signUp.addEventListener('submit', function(event) {
     event.preventDefault();
});
          
function isNameValid(char) {
    var val = char.value;
          
    if (validator.isEmpty(val)) {
        if (val.length < 2) {
            // Display a message if input length is less than 2
            char.setCustomValidity("We expect your input should contain at least 2 characters, darling !");
            char.style.borderColor = "red";
        } 
       
        if(!isNaN(val)) {
            char.setCustomValidity("Please, enter only characters");
            char.style.borderColor = "red";
        }
           
    } else {
        char.setCustomValidity("");
        char.style.borderColor = "green";
    }
}
<form id="signUp">
    <input type="text" id="fName" name="firstname" placeholder="First name"> 
    <input type="checkbox" name="result"  required  autofocus> Agree our conditions
    <input type="submit" id='subMit' value="SUBMIT">
</form>
clemens
  • 16,716
  • 11
  • 50
  • 65
Tiyor
  • 119
  • 1
  • 1
  • 8
  • Not able to replicate,can you please tell the steps to replicate – brk Nov 18 '17 at 06:11
  • @Tiyor have you debugged your code? If not, try following info from [this answer](https://stackoverflow.com/a/19623573/1575353) or ones after it – Sᴀᴍ Onᴇᴌᴀ Nov 18 '17 at 06:14
  • You have logical error in your condition. You have put a condition if (validator.isEmpty(val)) but then you are trying to check if it have length more than 2 inside of same condition. That is if you will have any character in input box it will not enter the if condition above and will always go to else part of it. – Bharat Nov 18 '17 at 07:03
  • @Bharat, make sense. Thank you for your time – Tiyor Nov 18 '17 at 07:24

1 Answers1

0

It took me a while but I hope following works for you. Let me know if you need help understanding anything. I felt your code was a bit complex so I simplified it.

<script>
function submitForm(){
var formValid = false;
var msg = "";
var fNameElement = document.getElementById("fName");
if(fNameElement){
  var fNameValue = fNameElement.value;
  if(fNameValue.length < 2){
    msg = "We expect your input should contain at least 2 characters, darling !";
  }
  else if(!(/^[a-zA-Z]+$/.test(fNameValue))){
    msg = "Please, enter only characters";
  }
  else{
    formValid = true;
  }
  if(formValid){
    fNameElement.style.borderColor="green";
    //do something
  }
  else{
    fNameElement.style.borderColor="red";
    alert(msg); // or show it in a div
  }
}
}
</script>
<form id="signUp" action="javascript:submitForm()">
    <input type="text" id="fName" name="firstname" placeholder="First name"> 
    <input type="checkbox" name="result"  required  autofocus> Agree our conditions
    <input type="submit" id='subMit' value="SUBMIT">
 </form>

Fiddle: https://jsfiddle.net/fxumcL3d/3/

rupindr
  • 604
  • 4
  • 14