Question

我的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

你的问题：

您正在测试HTMLInputElement对象，而不是它们持有的值（因此获取值）
您正在将字符串与null进行比较（与空字符串比较）
您的失败情况是基于所有失败，而不是任何失败（使用或而非和）

这样：

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

要确定哪个为空，您需要一次测试一个，而不是使用if s的单个||语句。

Answer 2

从按钮中删除单击处理程序并在表单上放置一个提交处理程序：

<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
}

这是一个非常小的验证脚本，但它是一个开始。

顺便说一句，由于您的表单控件具有名称（必须成功），因此它们不需要ID。

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

更改

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');
}

Answer 5

您可以使用以下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";
        }
    }
}

从验证表单返回一个空字段名称

5 个答案: