Question

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

为此，我做了以下操作，但是问题是当用户select的电子邮件从下拉菜单中显示警报时，我不希望这样做，我希望当用户从DDL中选择电子邮件时，它显示一个文本框，如果文本框为空，则显示alert（），那么我错了！任何人都可以请我帮忙或指出正确的方向！ :)
预先感谢。

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

    });
});

Answer 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>

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

    });
});
});

Answer 2

您可以将函数RMAfunction（）更改为：

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

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

如何基于DropDownList选择验证文本框-JavaScript

3 个答案: