时间戳

首页 > 解决方案 > 如何根据 DropDownList 选择验证 TextBox - JavaScript

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

问题描述

我正在尝试基于 DropDownList selection 验证 TextBox ，这意味着如果用户选择或E-mail从DropDownList 它显示基于用户选择的文本框。让我们说他们选择的电子邮件并显示一个文本框让用户输入他们的电子邮件并让我们说他们忘记输入电子邮件地址（将其留空）然后单击按钮，在这里我要显示警报（“您忘记输入您的电子邮件”）。SMSboth

为此我做了如下操作，但问题是当用户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();
        }

    });
});

标签： javascriptjquery

解决方案

试试这个 -

使用单击事件附加按钮 -

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>

JS

单击按钮时触发单击功能

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

    });
});
});

推荐阅读