Javascript 显示基于输入类型和验证的不同错误

这是最近让我头疼的事情

我正在用SpringMVC构建一个Web应用程序，一些表单包括多种输入类型，例如表单：单选按钮[Spring单选按钮]、选择框、文本字段等。。。。 我的目标是使用jQuery中的.hide和.show方法隐藏/显示标题下ID为msgDiv的div，并选择两种表单上相同的颜色。 我想要实现的是对这两个表单使用相同的验证函数，并相应地显示/隐藏自定义消息

请注意，这只是我在修改应用程序之前为确保正确的错误处理和验证而做的练习，所以请忽略本例中颜色选择和音乐的愚蠢

继续看代码

表单1：仅选择表单选择框验证 HMTL代码段：

<form:form action="FormA" commandName="user" name="myForm" id="myFormSelect">
    <input type="hidden"  id="color" name="color" value="${requestScope.user.color}" />
        <h2>Select a Color</h2>
        <div id="msgDiv">
            <form:errors path="*"  element="span"  id="errorMsg" /> 
            <span id="message"/></span><br/><br/>
        </div>
        <p>Please select a color</p>

            <select id="userSelect" name"user" class="selectbox_class" style="max-width: 200px;">
                <option value="">--Select One--</option>
                    <%
            Map<String, String> myMap = ( Map<String, String>) session.getAttribute("myMap");
            for (String key:myMap.keySet())
            {
            %>  <option value="<%= key %>"><%out.print(key+"</option>");
            }
            %>
            </select>
    <br/>
    <br/>
    <div class="button-panel"><span class="buttons buttons-left"></span>
        <button type="button" class="buttons buttons-middle"  onClick="selectVal();" id="send" value="send">Submit</button>
        <span class="buttons buttons-right"></span>
    </div>
</form:form>

要求：

Div应该保持隐藏，除非即使在页面加载时验证也没有完成 应显示相应的错误消息 如果用户单击“提交”而未选择颜色或音乐类型，则应显示组合消息。 这里还有一个类似的线程供参考。

---

谢谢

好吧，再过几个小时，我就想出了这个答案

@DWB同时取出隐藏/显示并使用.toggle切换页面上的显示 我没有尝试从内部和外部脚本调用代码，而是使用K.I.S.S方法。对于初学者或像我这样的中级程序员来说，始终要记住一件好事。保持简单和直接 因此，不是每个html页面上的6个函数2个函数，而是一个单独文件中的2个方法，每个方法调用2个函数，最终产品是：

一个用于验证的函数和一个window.onload函数调用将div隐藏在外部文件yourname.js中 如果您有任何问题，请给我发短信或电子邮件，一如既往，欢迎采用不同的方法

解决方案：

下面是它的工作原理：

我创建了一个函数“customMessageForMultipleInputs”，它在我的HTML文件中在单击事件的按钮中调用。e、 g.myBTN prop=val、prop=val、onClick=customMessageForMultipleInputs等

在我最初的问题中，我把编程逻辑搞乱了。更简单的说法是，我单选按钮的.checked属性，例如ifdocument.getElementByIdradio1.checked==类似于用户选择下拉框的“值”

window.onload=函数{ customMessageForMultipleInputs； };

听起来很傻，但第三部有一段时间让我打了个圈套，因为我想表现得圆滑些，做的事情比必要的多。对于任何使用new window.onload的人来说，本质上是确保页面显示时不总是呈现，但是根据我的经验，此函数将启动，并且默认设置为我的error div“msgDiv” 将被隐藏并保持隐藏状态，除非用户未正确填写表单

无论如何，我希望有一天这能帮助到别人，谢谢

---

我喜欢这个网站！！：

不必费心隐藏div。如果没有错误，它将是空的并且不会显示。到目前为止，如果我不使用，div显示有或没有错误。隐藏或显示：无…它使页面的布局看起来非常粗糙，特别是在IE中。考虑使用jstl逻辑标记仅在出现错误时显示错误div。这是@DwB的一个好观点但不幸的是，在我的例子中，我被要求只使用javascript/jQuery。我会1+的，因为我发现这是一个很好的答案。知道我在javascript中做错了什么吗？你从不调用。隐藏在你的示例中。如果功能当前处于错误显示状态且从未消失，则这可能是原因。

<form:form action="FormB" commandName="user" name="mySecondForm" id="mySecondFormSelectAndRadio">
    <input type="hidden"  id="color" name="color" value="${requestScope.user.color}" />
        <h2>Select a Color</h2>
        <div id="msgDiv">
            <form:errors path="*"  element="span"  id="errorMsg" /> 
            <span id="message"/></span><br/><br/>
        </div>
        <p>Please select a color</p>

            <select id="userSelect" name"user" class="selectbox_class" style="max-width: 200px;">
                <option value="">--Select One--</option>
                    <%
            Map<String, String> myMap = ( Map<String, String>) session.getAttribute("myMap");
            for (String key:myMap.keySet())
            {
            %>  <option value="<%= key %>"><%out.print(key+"</option>");
            }
            %>
            </select>
    <br/>
<h2>Music Genre</h2>
<p>Please select the button which describes your taste in music</p>

<form:radiobutton path="music" name="radio" id="radio1" value="classicForm"/><label for="radio1">Classical Music</label><br> 
<form:radiobutton path="music" name="radio"  id="radio2" value="jazzForm"/><label for="radio2">Jazz Music</label><br>
<br>
<div class="button-panel"><span class="buttons buttons-left"></span>
   <button type="button" class="buttons buttons-middle" onClick="history.back(-1)">Back</button>
   <span class="buttons buttons-right"></span>
</div>
<div id="spacer"></div><div id="spacer"></div>
<div class="button-panel">
    <div id="spacer"></div>
    <span class="buttons buttons-left"></span>
    <button type="button" class="buttons buttons-middle"  onClick="selectVal();" id="send" value="send">Submit</button><span class="buttons buttons-right"></span>
</div>

  $(document).ready(function(){

<% if (myMap != null) {%>
    $('select[name=userSelect]').change(function() {
        var selVal = $(this).val();
        var txtVal = $("#userSelect option:selected").text();
        $("#color").val(txtVal);    
     }); 

     $('select[name=userSelect]').val($("#color").val());

<%} else { %>
    $("#color").val("${user.color}");
<%} %>
    });

    $(document).ready(function(selectVal) {  
     if ($("#userSelect").val()=="")      
        $("#msgDiv").show();
    return dataValid;
    });

function submitForm(formId)
{
document.getElementById(formId).submit();
}

function selectVal() {
var dataValid = true;
var selector = document.getElementById("userSelect");
var radios = $("input[name=radio]");
var message= document.getElementById("message");
var errorMsg = "";

message.innerHTML = "";
if (selector.value == "" || radios.checked == false) {
    $('#msgDiv').hide();
    dataValid = false; 

    if (selector.value == "") {
        errorMsg += "Please Select an Color from the Drop Down Menu";
    }

    if (radios.checked == false) {
        errorMsg += "Please select a Genre of Music";
    }

    message.innerHTML = errorMsg; 
    }

    return dataValid;
   }

function customMessageForMultipleInputs()
{
var choicesForm = document.getElementById("choicesForm");

if(radio1.checked=="" && radio2.checked=="" && document.getElementById("userSelect").value=="")
{           selected=false;
        document.getElementById("msgDiv").style.display = "block";
        document.getElementById("errorMsg").innerHTML="Please select your Favorite Color and
   a Genre of Music";
        return false;

 }
 if(document.getElementById("userSelect").value=="")
 {
        document.getElementById("msgDiv").style.display = "block";
        document.getElementById("errorMsg").innerHTML="Please select a Color";
        return false;
 }if(document.getElementById("radio1").checked=="" && document.getElementById("radio2").checked=="") 
 {  
selected=false;
document.getElementById("msgDiv").style.display = "block";
    document.getElementById("errorMsg").innerHTML="Please select a Genre of Music;
     return false;
 }else{   
        document.getElementById("msgDiv").style.display = "none";
        reportOutageConfirm.submit();
        return true;
        document.getElementById("msgDiv").style.display = "none";
 }
 };
window.onload = function() {
customMessageForMultipleInputs();
 };