Возвращает пустое имя поля из формы проверки

Question

http://jsfiddle.net/3vHxF/ Вот что я пытался

И мой HTML код:

<form id="commentForm" style="width:200px;" name="MYFORM" action="#"> 
        <label> 
        <strong>Enquiry Form </strong> 
        </label> 
        <label>Name</label> 
        <input id="name" type="text" size="30" name="name"> 
        <label>Phone No</label> 
        <input id="phone" type="text" size="30" name="phone"> 
        <label>Email</label> 
        <input id="email" type="text"size="30" name="email"> 
        <label>Message</label><br> 
        <textarea id="message" name="message"></textarea> 
        <input id="Send" type="submit" value="Send" onclick="send()"> 
        </form> 

Javascript is : 

var name=getElementById('name'); 
var phone=getElementById('phone'); 
var email=getElementById('email'); 
var mess=getElementById('message'); 

function send(){ 

if(name==null&&phone==null&&email==null&&mess==null) 
    alert('field is empty'); 
} 

Я хочу, чтобы предупредить поле, которое пусто, и в то же время я хотите написать это просто. Пожалуйста, не предлагайте никаких плагинов.

Answer 1

Вы можете использовать следующую JQuery:

$(":text,textarea").each(function() { 
    $(this).css("outline", $(this).val() ? "1px solid red" : "none"); 
}); 

---

Извините, я думал, что "нет плагинов" не означает "нет плагинов JQuery." (Вы могли бы назвать JQuery библиотеку или зависимость, а не "плагин")

Это в основном не тестировалась без JQuery версии:

function highlightMissingInputs() { 
    for (var formIndex = 0; formIndex < document.forms.length; formIndex++) { 
     var form = document.forms[formIndex]; 
     for (var inputIndex = 0; inputIndex < form.length; inputIndex++) { 
      var input = form[inputIndex]; 
      switch (input.tagName) { 
       case "INPUT": 
        var typeAttribute = input.attributes.type; 
        if (typeAttribute) { 
         var type = (typeAttribute.value || "").toLowerCase(); 
         switch (type) { 
          case undefined: 
          case "": 
          case "text": 
          case "email": 
          case "tel": 
          case "email": 
          case "search": 
           break; 
          default: 
           continue; 
         } 
        } 
        break; 
       case "TEXTAREA": 
        break; 
       default: 
        continue; 
      } 

      input.style.outline = input.value ? "none" : "1px solid red"; 
     } 
    } 
} 

Answer 2

Ваши проблемы:

• Вы тестируете HTMLInputElement (так что получите значение)
• Вы сравниваете строки с null (по сравнению с пустой строкой)
• Ваш fai состояние приманки на основе все из них неудачи вместо любого из них неудачи (используйте или не и)

Такой:

if(name.value === "" || phone.value === "" || email.value === "" || mess.value === "") 
    alert('field is empty'); 
} 

Чтобы определить какой один пусто, вам нужно протестировать их по одному, а не в одном документе if с ||.

Answer 3

Непонятный подход. Но попробуйте разработать код ниже.

var name=document.getElementById('name').value; 
var phone=document.getElementById('phone').value; 
var email=document.getElementById('email').value; 
var mess=document.getElementById('message').value; 

function send(){ 

if(isEmpty(name, 'name') || isEmpty(phone, 'phone') || isEmpty(email, 'email') || isEmpty(mess, 'message')) { 
    return false; 
    } 
    return true; 
} 

function isEmpty(val, fld) { 
    if(val && val != null) { 
     return true; 
    } 
    alert(fld +" is Empty"); 
    return false; 
} 

Answer 4

Удалите обработчик щелчка от кнопки и поставить представить обработчик на форме:

<form id="commentForm" onsubmit="return validat(this);" ... > 

Теперь вы можете сделать простую проверку:

function validate(form) { 
    var control; 
    var isValid = true; 

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

    if (control.value == '') { 
     alert('Field ' + control.name + ' is empty'); 
     isValid = false; 
    } 
    } 
    return isValid; // false cancels submit 
} 

Это очень минимален скрипт проверки подлинности, но это начало.

Кстати, поскольку ваши элементы управления формой имеют имена (которые должны быть успешными), им не нужны идентификаторы.

Answer 5

изменение

var name=getElementById('name'); 
var phone=getElementById('phone'); 
var email=getElementById('email'); 
var mess=getElementById('message'); 

в

var name=document.getElementById('name').value; 
var phone=document.getElementById('phone').value; 
var email=document.getElementById('email').value; 
var mess=document.getElementById('message').value; 

, а затем использовать

if(name.value === "" || phone.value === "" || email.value === "" || mess.value === "") 
    alert('field is empty'); 
}