当文本框为空时发出警报,并阻止提交按钮提交


Alert when a textbox is empty and prevent submit button from submitting

好的,所以我一直在研究一些小HTML和PHP,如果文本框为空,我希望在单击提交按钮后实际发生一个特定事件。我已经寻找了大量的javascript代码,但它们都不起作用(或者可能我没有做足够的工作来处理它们并使它们起作用),我甚至不知道javascript是否只是解决方案。我真的不太擅长javascript,我不知道是否有其他方法可以解决这个问题。我希望,如果用户将文本框留空,则在单击提交按钮后会提醒用户,并阻止按钮从表单提交和输入操作,以便用户可以在输入php代码之前输入他们的输入。我读到这两者实际上不可能结合在一起,php和javascript具有这种警报和预防功能,如果真的存在,还会有其他方法来处理吗?

Javascript可以帮助您做到这一点,你很可能想要这样的HTML部分:

<form onSubmit="return validate(this);" ...>
     <input type="text" id="usefulId"></input>
     <input type="submit"/>
</form>

对于javascript,一切都取决于你到底想要实现什么,然而我使用的是这样的东西:

function validate(theForm)
{
    var valid = true
    var textbox = document.getElementById("usefulId");
    if (textbox.value) {
         textbox.setAttribute("class", "valid");
    } else {
         textbox.setAttribute("class", "invalid");
         valid = false;
    }
    return valid;
}

如果添加一些css将文本框染成红色或类似的颜色,则应该通知用户。当然,一些好的做法是将真正的验证转移到另一个正在调用的函数上,这样你就可以重用它。如果你想以某种方式提供一些关于为什么它是错误的信息,你可以写一些代码来填写标签。。。

HTML5还有一些可以帮助你的东西:所需的属性(这里写的是为了符合xhtml)

<form onSubmit="return validate(this);" ...>
     <input type="text" id="usefulId" required="required"></input>
     <input type="submit"/>
</form>

然而,这只适用于支持html5的浏览器(http://caniuse.com/#feat=form-验证),所以如果我找到了正确的页面和一些其他浏览器(版本),就不支持IE6-9。尽管这意味着你不能依靠它来解决你的问题,但它会给浏览器带来一些不错的效果。