I want to enhance the validation of my text field by restricting it to only allow letters a-z and -.
Currently, if the input is invalid, a cross appears, and if it's valid, a check mark appears. However, I need the validation to also check for minimum and maximum character limits, such as having a minimum of 5 and a maximum of 60 characters.
In addition, I am facing an issue where the validation allows the @ character in certain cases, like 'hello@', when it shouldn't be allowed on its own.
Here is my current script:
<script>
function validateCname(CnameField){
var reg = /[A-Za-z\._-]$/;
if (reg.test(CnameField.value) == false)
{
document.getElementById("emailTick").style.display='none';
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>
HTML:
<input type="text" id="field_cname" name="cname" class="field_cname" onfocus="document.getElementById('field_cname').style.background='#ffffff';" onblur="validateCname(this);">
<div id="emailCross"></div><div id="emailTick"></div>