Javascript: как сбросить поля формы до исходных значений текста после нажатия кнопки сброса

Question

в основном у меня есть эта форма. когда я нажимаю кнопку «отправить сообщение», если в ней есть поле без значения, поле возвращается с красным сообщением об ошибке. но когда я нажимаю reset, он не меняет значения на черный текст, а текст остается красным .. как я могу это исправить?

<form id="contact" action="" onsubmit="checkContactForm(this); return false;"> 
<p>Fill in the form below to send me a message!</p>  
<p> 
    <label for="firstname">First name:</label> 
    <input name="firstname" id="firstname" onfocus="resetField(this);" /> 
</p> 
<p> 
    <label for="lastname">Last name:</label> 
    <input name="lastname" id="lastname" onfocus="resetField(this);" /> 
</p> 
<p> 
    <label for="email">E-mail address:</label> 
    <input name="email" id="email" onfocus="resetField(this);" /> 
</p> 
<p> 
    <label for="message">Your Message:</label> 
    <textarea name="message" id="message" onfocus="resetField(this);"></textarea> 
</p> 
<p> 
    <button type="submit">Send Message</button> 
    <button type="reset">Reset Form</button> 
</p> 
</form> 

и это JavaScript:

var requiredFields = [ "firstname", "lastname", "email", "message" ]; 

function checkContactForm(theForm) { 
    for (i in requiredFields) { 
    var fieldName = requiredFields[ i ]; 
    var theField = theForm[ fieldName ]; 

    if (!theField.value || theField.value == "Error") { 
     theField.style.color = "#f66"; 
     theField.value = "Error"; 
     var emptyFields = true; 
    } 
    } 

    if (!emptyFields) { 
    theForm.submit(); 
    } 
} 

function resetField(theField) { 
    if (theField.value == "Error") { 
    theField.value = ""; 
    theField.style.color = "#000"; 
    } 
} 

Answer 1

Сброс форма только сбрасывает значения, поэтому вам нужно добавить слушателя на кнопку сброса, чтобы изменить цвет обратно, например,

<input type="reset" onclick="resetForm(this);"> 

и в функции что-то вроде:

function resetForm(el) { 
    var form = el.form; 
    for (var els = form.elements, i=els.length; i;) { 
    els[--i].style.color = #000000; 
    } 
} 

Выше всего лишь пример, вам нужно адаптировать его в соответствии с.

Кроме того, это не рекомендуется использовать для ... над массивом. Где у вас есть:

for (i in requiredFields) { 

вам лучше сделать что-то вроде:

var requiredFields = {'firstname':'', 'lastname':'', 'email':'', 'message':''}; 
var element, elements = form.elements; 

for (var i=0, iLen=elements.length; i<iLen; i++) { 
    element = elements[i]; 

    if (element in requiredFields) { 

    if (!element.value || element.value == 'Error') { 
     ... 

Кроме того, если элементы управления формы имеют название, они редко нуждаются в ID, а также.