CODEWITHSUNDEEP
javascript
user3488706
user3488706

Reputation: 11

Add JavaScript min length validation to text field?

I'm currently using JavaScript code to validate a text field when the user types in letters a-z. The script shows a tick if this is valid and a cross if its not. Now I am trying to add to the code to say check that the letters meet a minimum length of at least 4 characters, and if the min characters is met then show the tick and if the text is under the min character length show the cross.

How can I adjust my script to check the minimum length of the characters entered? Also can someone show me how I can allow '-' to be allowed in my validation?

script:

<script>
function validateCname(CnameField){
        var reg = /^[A-Za-z]+$/; 

        if (reg.test(CnameField.value) == false) 
        {
            document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
            document.getElementById("emailCross").style.display='block';
            return false;
        }
        if (reg.test(CnameField.value) == true)
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;
}
</script>

tried:

<script>
function validateCname(CnameField){
        var reg = /^[A-Za-z]+$/; 
        var len = {min:4,max:60};


        if (reg.test(CnameField.value) == false) 
        if(input.value.length>!=len.min) return flase;
        {
            document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
            document.getElementById("emailCross").style.display='block';
            return false;
        }
        if (reg.test(CnameField.value) == true)
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;
}
</script>

Upvotes: 0

Views: 4755

Answers (3)

Arunkumar Subramani
Arunkumar Subramani

Reputation: 13

const validateCname = value => value.length < 4  ?  `success message` : `error message`

Upvotes: 0

Justin Mitchell
Justin Mitchell

Reputation: 304

Almost there but you have a few syntax issues, so I've created an example test script for you:

function validateValue(value) {
  var reg = /^[A-Za-z]+$/g; 
  var len = {min:4,max:60};

  if (!reg.test(value)) {
    console.log('didn\'t match regex');
    return false;
  }

  if (value.length < len.min || value.length > len.max) {
    console.log('incorrect length: ' + value);
    return false;
  }

  console.log('correct length: ' + value);
  return true;
}

validateValue('teststring');

Notice how I have set up the regex test, removing the == false? It's not needed because either false or array is returned. A true test will return true if anything other than null or false is returned.

Upvotes: 2

Amit
Amit

Reputation: 15387

Try this

<script>
function validateCname(CnameField){
        var reg = /^[A-Za-z]+$/; 
        var len = {min:4,max:60};


        if (reg.test(CnameField.value) == false) {
            if(input.value.length<len.min) 
            {
                document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
                document.getElementById("emailCross").style.display='block';
                return false;
            }
            return false;
        }
        if (reg.test(CnameField.value) == true)
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;
}
</script>

Upvotes: 1

Related Questions