javascript - 我想防止我的搜索表单中出现空字段

Question

我绝对是 javascript 的初学者，如果 2 个字段中的第 2 个或第 1 个为空，我会尝试不提交我的(2 个字段和位置)搜索表单，并显示一条消息，例如“不允许空字段” .

我的 2 个字段是:

<input id="cf28" class="fxsearch_a1" type="text" size="30" name="cf28" />
<input id="city3" class="fxsearch_b1" type="text" size="30" name="city" />

感谢并等待您的帮助...

这是我所有的代码..

<p>
<script type="text/javascript">
// <![CDATA[
function showlayer(layer) {
var mymenu = document.getElementById(layer).style.display;
if (mymenu == "block") {
document.getElementById(layer).style.display = "none";
} else {
document.getElementById(layer).style.display = "block";
}
}
// ]]>

</script>
</p>
<p>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js
sensor=false&amp;libraries=places"></script>
<script type="text/javascript">
// <![CDATA[
function initialize() {
var input = document.getElementById('city3');
var options = {
types: ['(cities)'],
componentRestrictions: {
country: "gr"
}
};
// var options = {
//  types: ['(regions)']
// };
new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
// ]]>

</script>
</p>
<div class="fixedsearch">
<form id="Simplesearchform" action="index.php" method="post" name="Simplesearchform">  <select id="searchcondition" class="inputbox" style="display: none;" name="searchcondition" size="1"><option value="1">option 1</option><option selected="selected" value="2">option 2</option></select>
<div class="fxbrowse">
<p id="showorHide" class="browsing"><a onclick="javascript:showlayer('mymenu')">My Menu</a>
</p>
</div>
<div class="fxgroupfields">
<div class="what">What?</div><input id="cf28" class="fxsearch_a1" type="text" size="30" name="cf28" />
<div class="where">Where?</div><input id="city3" class="fxsearch_b1" type="text" size="30" name="city" /><input id="submit" class="fxbutton" type="submit" value="GO" />
</div><input type="hidden" value="103" name="Itemid" /><input type="hidden" value="com_mtree" name="option" /><input type="hidden" value="advsearch2" name="task" />
</form>
</div>
<div id="mymenu" class="menubrowse">
<div class="menulinks"><a href="catalog" target="_self">My Catalog</a>
</div>
<div class="menulinks"><a href="catalog/add" target="_self">Add New</a>
</div>

</div>

Answer 1

虽然问题被标记为 Java，但我认为您指的是 Javascript。

对于 vanilla Javascript，你可以这样做:

// Generic validation function to ensure you Don't Repeat Yourself (DRY)
function validate(obj) {
    if (!obj.value) {
        document.getElementById('yourmessageelement').innerHTML =
            "Empty fields not allowed!";
    }
}

// Event handlers for blur (when an element loses focus)
document.getElementById('cf28').onblur = function() {
    validate(this);
}

document.getElementById('city3').onblur = function() {
    validate(this);
}

如果您不希望用户提交带有空字段的表单，您还需要使用以下代码在某处禁用提交按钮:

document.getElementById('yoursubmitbutton').disabled = 'disabled';

像 JQuery 这样的库会对此有所帮助，但它们有一个学习曲线，而且知道如何自己做东西也很好。