0

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

我想提醒空的字段，同时我想简单地写它。请不要推荐任何插件。

4

5 回答 5

2

你的问题：

  • 您正在测试 HTMLInputElement 对象，而不是它们持有的值（所以获取值）
  • 您正在将字符串与null（与空字符串进行比较）进行比较
  • 您的失败条件是基于所有这些都失败而不是其中任何一个失败（使用或不使用and）

这样的：

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

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

于 2013-03-20T13:26:25.120 回答
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。

于 2013-03-20T13:33:05.950 回答
1

不是一个干净的方法。但是尝试开发下面的代码。

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;
}
于 2013-03-20T13:31:07.817 回答
1

改变

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');
}
于 2013-03-20T13:44:30.343 回答
0

您可以使用以下 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";
        }
    }
}
于 2013-03-20T13:24:24.713 回答