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

Question

最近，这件事一直困扰着我。

我正在Spring MVC中构建Web应用程序，某些表单包括多种输入类型（例如form：radiobuttons [spring单选按钮]，选择框，文本字段等）。 我的目标是在jQuery中使用.hide（）和.show（）方法来隐藏/显示在标题（“选择颜色”）下具有ID“ msgDiv”的div，这两种形式都相同。 我要实现的是对两种表单使用相同的验证功能，并相应地显示/隐藏自定义消息。

注意 这只是我所做的练习，目的是在更改我的应用程序之前确保正确的错误处理和验证，因此在此示例中忽略了颜色选择和音乐的愚蠢行为。

上代码！

Form1：“选择表单”（仅选择框验证）
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>

Form2：“选择和单选表格”（选择框和单选验证）
HMTL代码段：

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

到目前为止，这是我的外部javascipt文件：

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

要求：

1. Div应当保持隐藏状态，除非即使在页面加载时验证仍未完成
2. 出现适当的错误信息
3. 如果用户单击提交而未选择颜色或音乐流派，则会出现一条组合消息。

同样，这里有一个类似的线程可供参考。 否则为验证语句 。

谢谢！！

Answer 1

好吧，再过几个小时，我就能得出这个答案

• @DWB一起取出hide（）/ show（）并使用.toggle（）切换页面上的显示
• 我没有尝试从内部和外部脚本中调用代码，而是使用KISS方法。 对于像我这样的初学者或中级程序员，永远要记住好事。 保持简单愚蠢

因此，最终的产品不是： 6个函数（每个html页面上2个函数，在一个单独的文件中2个方法每个都调用2个函数），最终的结果是：

• 一个用于验证的函数和一个window.onload函数调用，用于使div隐藏在加载状态并重新加载到外部文件（“ yourname.js”）中

如果您有任何疑问，请给我发电子邮件或给我发电子邮件，一如既往，欢迎您采用其他方法！

解：

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

运作方式如下：

1. 我创建了一个函数'customMessageForMultipleInputs（），该函数在点击事件中的按钮内的HTML文件中调用。 （例如，myBTN prop = val，prop = val，onClick =“ customMessageForMultipleInputs等。）

2. 在我最初的问题中，我正在完善我的编程逻辑。 仅仅说单选按钮的.checked属性（egif（document.getElementById（“ radio1”）。checked ==“”）类似于“ userSelect”保管箱的' value '就更容易了。

3. window.onload = function（）{ customMessageForMultipleInputs （）; };

听起来很傻，但是＃3让我循环了一下，因为我试图变得“滑溜溜”，并且做了超出必要的事情。 对于任何新的window.onload而言，从本质上来说，它可以确保不显示页面时（但是根据我的经验，并不总是呈现该页面），此功能将触发，并且我的错误div（#msgDiv'）的默认设置将被隐藏并保留除非用户未正确填写表单，否则从页面隐藏。

无论如何，我希望这可以帮助某人一天，谢谢！！！！

我爱这个网站！ :)