jquery 未填写任何字段时显示的必填消息

gdrx4gfi 于 2023-03-17 发布在 jQuery

关注(0)|答案(1)|浏览(94)

我的网页上有以下代码：

<div class="form-group row">
                    <div class="col-sm-4">
                        <label asp-for="HomePhone" class="control-label" style="font-weight:bold;"></label>
                        <input asp-for="HomePhone" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
                        <span asp-validation-for="HomePhone" class="text-danger"></span>
                    </div>
                    <div class="col-sm-4">
                        <label asp-for="WorkPhone" class="control-label" style="font-weight:bold;"></label>
                        <input asp-for="WorkPhone" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
                        <span asp-validation-for="WorkPhone" class="text-danger"></span>
                    </div>
                    <div class="col-sm-4">
                        <label asp-for="CellPhone" class="control-label" style="font-weight:bold;"></label>
                        <input asp-for="CellPhone" class="form-control" placeholder="(___) ___-____" data-slots="_" />
                        <span asp-validation-for="CellPhone" class="text-danger"></span>
                    </div>
    </div>
       <div class="form-group" style="margin-top:20px"  >
                    <input style="float: right; margin-bottom:20px" type="submit" value="Submit" class="btn btn-primary" />
        </div>

我希望最终用户至少填写一个电话号码。如果他们未填写任何电话号码，则我希望显示一条必填消息，说明至少需要一个电话号码。如果他们愿意，可以填写所有三个电话号码。我希望在最终用户单击“提交”按钮时显示此必填消息。消息是否可以显示为工具提示或文本框底部的红色文本。这可以在JavaScript或jQuery中实现吗？
目前，我的网页上有这样的东西。我有所有需要的三个电话号码：

我是通过在Model类中使它们成为必需的来实现这一点的。
任何帮助都将不胜感激。

jquery

来源：https://stackoverflow.com/questions/75668868/required-message-shown-when-none-of-the-fields-are-filled-out

1条答案

按热度按时间

inb24sb21#

要做到这一点，你可以使用jQuery。你可以准备一个函数来检查字段。这个函数将在你点击提交按钮时被触发。如果三个字段为空，那么提交将被拒绝，并显示消息。否则表单将被提交。
请参见下面的代码：

function checkPhoneField(element) {
    event.preventDefault();
    let $formElement = $(element).closest("form");
    let isEmpty = true;
    
    $formElement.find("label+input").each(function(){  
        let inputVal = $(this).val();
        if((inputVal != null) && (inputVal != "")){
            isEmpty = false;
            return  false;
        }
    });
    
    if(isEmpty){
        $formElement.find(".text-danger").show();
    }
    else {
        $formElement.submit();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="Get">
    <div class="form-group row">
        <div class="col-sm-4">
            <label asp-for="HomePhone" class="control-label" style="font-weight:bold;"></label>
            <input asp-for="HomePhone" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
            <span asp-validation-for="HomePhone" class="text-danger" style="display:none;">msg 1</span>
        </div>
        <div class="col-sm-4">
            <label asp-for="WorkPhone" class="control-label" style="font-weight:bold;"></label>
            <input asp-for="WorkPhone" class="form-control input-lg" placeholder="(___) ___-____" data-slots="_" />
            <span asp-validation-for="WorkPhone" class="text-danger" style="display:none;">msg 2</span>
        </div>
        <div class="col-sm-4">
            <label asp-for="CellPhone" class="control-label" style="font-weight:bold;"></label>
            <input asp-for="CellPhone" class="form-control" placeholder="(___) ___-____" data-slots="_" />
            <span asp-validation-for="CellPhone" class="text-danger" style="display:none;">msg 3</span>
        </div>
    </div>
    <div class="form-group" style="margin-top:20px"  >
        <input style="float: right; margin-bottom:20px" type="submit" value="Submit" class="btn btn-primary" onclick="checkPhoneField(this)" />
    </div>
</form>

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 未填写任何字段时显示的必填消息

1条答案

相关问题

热门标签

最新问答