如何根据 DropDownList 选择验证 TextBox - JavaScript答案

【问题标题】：How Validate TextBox based on DropDownList selection - JavaScript如何根据 DropDownList 选择验证 TextBox - JavaScript
【发布时间】：2019-02-09 05:21:25
【问题描述】：

我正在尝试根据 DropDownList selection 验证 TextBox，这意味着如果用户从 DropDownList 中选择 E-mail 或 SMS 或 both 它会根据用户选择的内容显示 TextBoxs。让我们说出他们选择的电子邮件并显示一个文本框让用户输入他们的电子邮件，让他们说他们忘记输入电子邮件地址（留空）然后点击按钮，这里我想显示警报（“你忘记输入你的电子邮件”）。

为此，我做了如下操作，但问题是当用户 select 来自下拉列表的电子邮件显示警报时，我不希望这样做，我希望当用户从 DDL 选择电子邮件时，它会显示一个文本框和如果文本框为空显示警报（），那我做错了什么！谁能帮助我或指出正确的方向！ :)
提前致谢。

HTML：

        <div class="col-md-6">
            <div class="form-group">
                <select class="form-control border-input" id="ddlsmsemailboth" name="ddlsmsemailboth">
                    <option value="">- Select -</option>
                    <option value="S">SMS</option>
                    <option value="M">E-mail</option>
                    <option value="B">SMS/Email</option>
                </select>
                <div id="dvkemail" style="display: none">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
                </div>
                <div id="dvksms" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                </div>
                <div id="dvkboth" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">

         <button id="btnSubmitRMA" type="submit" class="btn">Submit</button>

                </div>
            </div>
        </div>

JavaScript：

 $("#btnSubmitRMA").click(function (e) {
                e.preventDefault();
                RMAfunction();
            });

function RMAfunction() {
      $("#ddlsmsemailboth").change(function () {
                    if ($(this).val() == "M") {   
                        if ($('input[name=EmailContact]').val() == "") {
                            alert("Empty");
                            return false;
                        }
                    } 
            });
      });

JavaScript（根据下拉选择值隐藏/显示 texbox）：

 $(function () {

    $("#ddlsmsemailboth").change(function () {
        if ($(this).val() == "S") {
            $("#dvksms").show();
            $("#dvkemail").hide();
            $("#dvkboth").hide();
        }

        else if ($(this).val() == "M") {
            $("#dvkemail").show();        
            $("#dvksms").hide();
            $("#dvkboth").hide();
        }

       else if ($(this).val() == "B") {
            $("#dvkboth").show();
            $("#dvkemail").hide();
            $("#dvksms").hide();                
        }

        else {
            $("#dvkboth").hide();
            $("#dvkemail").hide();
            $("#dvksms").hide();
        }

    });
});

【问题讨论】：

让我们知道您到底想做什么？这段代码 if ($(this).val() == "M") { if ($('input[name=EmailContact]').val() == "") { alert("Empty") ;返回假； } } 检查所选值是否为“M”，即电子邮件是否有价值。由于不存在任何值，因此警报来了
你在提交表单的时候尝试过吗？
@M3ghana 是的，当我从 DDL 选择电子邮件时，它会显示一个文本框，如果文本框为空，则显示 alert();

标签： javascript jquery

【解决方案1】：

试试这个 -

使用点击事件附加按钮 -

HTML

<!DOCTYPE html>
<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <div class="col-md-6">
            <div class="form-group">
                <select class="form-control border-input" id="ddlsmsemailboth" name="ddlsmsemailboth">
                    <option value="">- Select -</option>
                    <option value="S">SMS</option>
                    <option value="M">E-mail</option>
                    <option value="B">SMS/Email</option>
                </select>
                <div id="dvkemail" style="display: none">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
                </div>
                <div id="dvksms" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                </div>
                <div id="dvkboth" style="display: none">
                    <label class="form-control-label">Enter phone number </label>
                    <input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
                    <label class="form-control-label">Enter E-mail</label>
                    <input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
                </div>
         <button id="btnSubmitRMA" type="submit" class="btn">Submit</button>

            </div>
        </div> 
    </BODY>
</HTML>

点击按钮触发点击功能

$(document).ready(function ()
{
       $("#btnSubmitRMA").click(function (e) {
                e.preventDefault();
            });

      $("#btnSubmitRMA").click(function () {
                    if ($("#ddlsmsemailboth").val() == "M") {   
                        if ($('input[name=EmailContact]').val() == "") {
                            alert("Empty");
                            return false;
                        }
                    } 
            });

$(function () {

    $("#ddlsmsemailboth").change(function () {
        if ($(this).val() == "S") {
            $("#dvksms").show();
            $("#dvkemail").hide();
            $("#dvkboth").hide();
        }

        else if ($(this).val() == "M") {
            $("#dvkemail").show();        
            $("#dvksms").hide();
            $("#dvkboth").hide();
        }

       else if ($(this).val() == "B") {
            $("#dvkboth").show();
            $("#dvkemail").hide();
            $("#dvksms").hide();                
        }

        else {
            $("#dvkboth").hide();
            $("#dvkemail").hide();
            $("#dvksms").hide();
        }

    });
});
});

【讨论】：

嗨朋友，你面前的另一个人并给出正确答案:)，但你的回答很有帮助，我想标记为有用的答案，但我没有足够的声誉，我会将其标记为有用的答案，我希望它可以 :) 有美好的一天 :)

【解决方案2】：

您可以将函数 RMAfunction() 更改为：

function RMAfunction() {
    if ($('#ddlsmsemailboth').val() == "M") {   
        if ($('input[name=EmailContact]').val() == "") {
            alert("Empty");
            return false;
        }
    } 
}

【讨论】：

【解决方案3】：

您可以修改您的 RMAfunction() 之类的，并确保您的 html 中应该有表单标签

    $(document).ready(function () {

         $("#btnSubmitRMA").click(function (e) {
            e.preventDefault();
            RMAfunction();
           });
    });

    function RMAfunction() {

        if($("#ddlsmsemailboth option:selected").val() == "M" 
           && $('input[name=EmailContact]').val() == "" ){
            alert("you forgot enter you email");
            return false;
        }
      }

【讨论】：

我试过 dat to ，它也可以正常工作，谢谢你的帮助 :)
请制作 $(document).ready 函数并将 click 函数放入其中。并且您使用了 $(function () { 也一样，两者都相同，您可以使用任何一个。