Проблемы с изменением цвета границы в javascript

Question

Я представляю форму, и она имеет проверку, чтобы убедиться, что у моего текстового поля есть значение. Если false, предупреждение отображается нормально, однако я не могу получить границу для изменения цвета. Я не могу понять, что я делаю неправильно.

<script> 
    function validate(){ 
     var dob = document.forms["ppm"]["dob"].value; 
     if(dob == ""){ 
      document.getElementById("dob").style.border="red"; 
      alert("Error"); 
      return false; 
     } 
    } 
</script> 

<form onsubmit="return validate()" name="ppm" id="ppm" action="index.php" method="post"> 

<p>What is your DOB<br /> 
<input type="text" name="dob" id="dob" value="" /> 

<input type="submit" name="Continue" value="Continue"/> 
</form> 

Answer 1

Вы должны дать границе ширину до того, как она будет видна. Вы можете использовать отдельные border* свойства для этого:

document.getElementById("dob").style.borderColor ="red"; 
document.getElementById("dob").style.borderWidth ="2px"; 

Или придерживаться border но поставлять полную стоимость границы (ширина, стиль и цвет):

document.getElementById("dob").style.border = "2px solid red"; 

Вот рабочий пример немного изменен от Вашего оригинала:

function validate() { 
 
    var dob = document.getElementById('dob').value; 
 
    if (dob == null || dob == '') { 
 
    document.getElementById("dob").style.border = "2px solid red"; 
 
    alert("Error"); 
 
    return false; 
 
    } 
 
}

<p>What is your DOB 
 
    <br /> 
 
    <input type="text" name="dob" id="dob" value="" /> 
 

 
    <input type="button" onclick="validate()" name="Continue" value="Continue" />

Я соблазн переписать validate функцию во что-то вроде этого:

function validate() { 
    var dobEl = document.getElementById('dob'); // only get it once 
    if (!(dobEl.value || '').length)) { // if null or empty 
    dobEl.style.border = "2px solid red"; // set the style 
    alert("Error"); 
    return false; // don't submit the form 
    } else { 
    // set the border back to normal 
    } 
    return true; // do submit the form 
} 

Answer 2

Вы пропускаете закрывающий тег на вашем пункте (</p>). Вам также необходимо установить все части свойства границы при использовании style.border. Ниже приведен рабочий пример.

var isValid = function() { 
 
     var dob = document.forms["ppm"]["dob"].value; 
 
    
 
     if (dob === "") { 
 
      document.getElementById("dob").style.border = "solid 1px red"; 
 
      
 
      alert("Error"); 
 
      
 
      return false; 
 
     } 
 
     
 
     return true; 
 
    };

<form onsubmit="return isValid();" name="ppm" id="ppm" action="index.php" method="post"> 
 
     <p>What is your DOB</p> 
 
     <br /> 
 
     <input type="text" name="dob" id="dob" value="" /> 
 
     <input type="submit" name="Continue" value="Continue" /> 
 
    </form>