我正在尝试使用文本框和下拉菜单在HTML代码中进行验证

Question

我目前正在尝试计算的代码是我有一个下拉框，这是必填项。 如果从该下拉框中选择“完成”，则会出现一个文本框。 如果从该下拉框中选择“放弃”，则会出现另一个下拉框以及其他选项。

选择第一个下拉菜单后，我尝试将验证添加到这些第二个选项上。 在我的代码中，我将第一个下拉框“ ActionDD”标记为必填字段。 但是我无法使用文本框“ REMtextBox”或“ ReasonDD”下拉框来执行此操作，因为它们永远不会同时出现。

这是我的表格的代码

<form name=StudentForm action="javascript:window.close();">   
<div class="DDbox">
<select name="Action" id="ActionDD" required onchange="showHide()">
    <option value="">Action:</option>
    <option value="complete">Complete</option>
    <option value="abandon">Abandon</option>
    <option value="transfer">Transfer</option>
</select>
</div>
<br>
<div class="COMPLETEbox" id="COMPLETEbox" >
    <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;"/><br>

<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;">
    <option value="">Reason:</option>
    <option value="NoShow">No Show</option>
    <option value="Unfixable">Unfixable</option>
    <option value="other">Other</option>
</select><br><br>
    <br>
  <input type="submit" value="submit" onclick="checkform();">
</div>
</form>

这是我一直在为JavaScript编写的代码，用于在按下Submit按钮时检查条件。

 function checkform() {
    if (document.getElementById('ActionDD').value ="abandon" && (document.getElementById('ReasonDD').value =""))
        {
            validationMessage = validationMessage + 'Enter Reason';
            valid = false;
        }
        else valid = true;
}
</script>

我正在寻找一种解决方案，用于检查第一个下拉列表是否选择了值，然后从第一个下拉列表中选择的值出现的相应文本框或下拉列表都已选择。

在此先感谢您的帮助。

Answer 1

试试下面的代码。 想法是在更改ActionDD下拉菜单时设置/删除“ required”属性。 希望能帮助到你。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HTML code with text-boxes and drop-downs</title>

    <script type="text/javascript">

        var actionBox,
            reasonBox,
            completeBox,
            remTextBox,
            selectedAction,
            isFormValid, 
            validationMessage = "Not all required fields are filled in; ";

        function init() {
            actionBox = document.getElementById('ActionDD');
            reasonBox = document.getElementById('ReasonDD');
            completeBox = document.getElementById('COMPLETEbox');
            remTextBox = document.getElementById('REMtextBox');
            selectedAction = actionBox.value;

            remTextBox.style.display = 'none';
            remTextBox.removeAttribute("required");

            reasonBox.style.display = 'none';
            reasonBox.removeAttribute("required");

            isFormValid = false;
        }

        function checkform() {
            // Include other logic if needed here...
        }

        function showHide() {
            init();

            if (selectedAction == 'complete') {
                remTextBox.style.display = 'block';
                remTextBox.setAttribute("required", "required");
            }
            else if (selectedAction == 'abandon') {
                reasonBox.style.display = 'block';
                reasonBox.setAttribute("required", "required");
            }
        }
    </script>

    <style>
    </style>
</head>
<body>
    <form name="StudentForm">
        <div class="DDbox">
            <select name="Action" id="ActionDD" required onchange="showHide()">
                <option value="">Action:</option>
                <option value="complete">Complete</option>
                <option value="abandon">Abandon</option>
                <option value="transfer">Transfer</option>
            </select>
        </div>
        <br>
        <div class="COMPLETEbox" id="COMPLETEbox">
            <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;" /><br>

            <select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;">
                <option value="">Reason:</option>
                <option value="NoShow">No Show</option>
                <option value="Unfixable">Unfixable</option>
                <option value="other">Other</option>
            </select>
            <br>
            <br>
            <br>
            <input type="submit" value="submit" onclick="checkform();">
        </div>
    </form>
</body>
</html>

Answer 2

您在JavaScript验证功能中犯了一个小错误，您没有执行比较（x == y），而是进行了赋值（x = y）。

除此之外，还有一种略微不同的技术来获取选择框选定的值。

这是您的代码，稍有更改：

 function checkform() {
    var action = document.getElementById('ActionDD'),
          reason = document.getElementById('ReasonDD');

    if (action.options[action.selectedIndex].value =="abandon" && reason.options[reason.selectedIndex].value =="")
    {
        validationMessage = validationMessage + 'Enter Reason';
        valid = false;
    }
    else valid = true;
}

希望能有所帮助。

Answer 3

尝试这个。

function checkform() {
    if (document.getElementById('ActionDD').value =="abandon" && (document.getElementById('ReasonDD').value ==""))
        {
          //Your validation message                
          return false;
        }
        else  return true;
}
</script>

onchange（）

 function showHide() {
if(document.getElementById('ActionDD').value =="abandon")
{
 document.getElementById("ReasonDD").style.display= 'block';
 document.getElementById("ReasonDD").required = true;
}
else 
 document.getElementById("ReasonDD").style.display= 'none';

}

更改您的html一点。从按钮中删除checkform（）并添加到表单，如下所示。

<form name=StudentForm onsubmit="return checkform()" action="javascript:window.close();">

我正在尝试使用文本框和下拉菜单在HTML代码中进行验证

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-09-15 09:30:55

解决方案2
0 2016-09-15 05:42:46

解决方案3
0 2016-09-15 07:51:28

我正在尝试使用文本框和下拉菜单在HTML代码中进行验证

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-09-15 09:30:55

解决方案2 0 2016-09-15 05:42:46

解决方案3 0 2016-09-15 07:51:28

解决方案1
1 已采纳 2016-09-15 09:30:55

解决方案2
0 2016-09-15 05:42:46

解决方案3
0 2016-09-15 07:51:28