Add JavaScript min length validation to text field?

Question

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>

Justin Mitchell · Accepted Answer · 2014-04-03 11:54:46Z

2

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.

answered Apr 3, 2014 at 11:54

Justin Mitchell

3041 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit · Accepted Answer · 2014-04-03 11:48:45Z

1

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>

answered Apr 3, 2014 at 11:48

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Comments

Arunkumar Subramani · Accepted Answer · 2020-03-10 11:06:27Z

0

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

answered Mar 10, 2020 at 11:06

Arunkumar Subramani

136 bronze badges

Collectives™ on Stack Overflow

Add JavaScript min length validation to text field?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related