Как установить минимум до 2 и максимум до 10 символов, если символ превысил текстовое поле на красный цвет bg?

Question

У меня есть код ниже. Я хочу, чтобы мой максимальный ввод символов был 10 и min равным 2. Но я попытался, и мое текстовое поле все еще изменилось на красный, когда введенный мой минимальный символ был 2 или даже меньше 10 символов. Я не могу HTML maxlength или minlength здесь.

Это условие if (fname.value.match(/\S/)) проверяет, не пусто ли текстовое поле, когда оно должно проверять пробелы. Я пытался использовать != "", но когда я вводил что-то, он пропускается, когда я отлаживаю это.

function validation() { 
 

 
    var fname = ""; 
 
    var add = ""; 
 
    var message = ""; 
 
    // retrieving ids 
 
    fname = document.getElementById('fname'); 
 
    add = document.getElementById('add'); 
 
    // white to red 
 
    if (fname.value.match(/\S/)) { 
 
    fname.style.backgroundColor = "white"; 
 
    } 
 
    if ((fname != '') || (fname.value >= 10 || fname.value <= 2)) { 
 
    fname.style.backgroundColor = "red"; 
 
    } 
 
    // white to red 
 
    if (add.value.match(/\S/)) { 
 
    add.style.backgroundColor = "white"; 
 
    } 
 
    if ((add != '') || (add.value >= 10 || add.value <= 2)) { 
 
    add.style.backgroundColor = "red"; 
 
    } 
 

 
    if (fname.value == "") { 
 
    alert("Firstname is empty! Enter your firstname to resume"); 
 
    return false; 
 
    } 
 

 
    if (add.value == "") { 
 
    alert("Address is empty! Enter your address to resume"); 
 
    return false; 
 
    } 
 
}

<form onsubmit="return validation()"> 
 

 
    Firstname:<br> 
 
    <input type="text" name="fname" id="fname"> 
 
    <br> Address: 
 
    <br> 
 
    <input type="text" name="add" id="add"> 
 
    <br><br> 
 

 
    <input type="submit" onClick="validation(); return false;" value="Submit"> 
 
</form>

Answer 1

Вы должны проверить, если длина Значение находится в диапазоне от 2 до 10, а не само значение. Как это:

function validation() { 
 
    var fname = document.getElementById('fname'); 
 
    var add = document.getElementById('add'); 
 
    
 
    if (2 <= fname.value.length && fname.value.length <= 10) { // if there is input between 2 and 10 characters, then set the background to white 
 
    fname.style.backgroundColor = "white"; 
 
    }else {             // otherwise, ... 
 
    fname.style.backgroundColor = "red"; 
 
    alert("name is not valid!"); 
 
    return false; 
 
    } 
 
    
 
    
 
    if (2 <= add.value.length && add.value.length <= 10) {  // if there is input between 2 and 10 characters, then set the background to white 
 
    add.style.backgroundColor = "white"; 
 
    } 
 
    else {              // otherwise, ... 
 
    add.style.backgroundColor = "red"; 
 
    alert("addres is not valid!"); 
 
    return false; 
 
    } 
 
    
 
    return true; 
 
}

<form onsubmit="return validation()"> 
 

 
    Firstname:<br> 
 
    <input type="text" name="fname" id="fname"> 
 
    <br> Address: 
 
    <br> 
 
    <input type="text" name="add" id="add"> 
 
    <br><br> 
 

 
    <input type="submit" onClick="validation(); return false;" value="Submit"> 
 
</form>