Question

我有一个带输入和保存按钮的弹出模式。在启用“保存”按钮之前，我已将其添加到需要输入每个所需字段的位置。我想要添加的是包装div的类，以直观地显示所需的字段。因此，form-group div将有一个“has-error”类，直到输入内部获得文本。我希望这是有道理的。

请参阅下面的 JSFiddle here 或Stack Snippet。舞台＆amp;描述是必需的。但是我可以添加其他JQuery而无需通过ID调用它？我希望按类或“为每个”调用，因为我希望在不改变每次的情况下轻松地将此代码调整到其他页面。

示例...如果Stage为空，则包装它的表单组div将具有一个has-error类，一旦Stage中包含某些内容，该类就会消失。

$('.required-input').keyup(function () {
    inspectrequired();
});

function inspectrequired() {
    var count = 0;
    $('.required-input').each(function (i) {
        if ($(this).val() === '') {
            count++;
        }
        if (count == 0) {
            $('.btn-success').prop('disabled', false);
        } else {
            $('.btn-success').prop('disabled', true);
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://crm.champ.net/css/bootstrap.css">
<div class="row" id="popupmodal" tabindex="-1" role="dialog" aria-labelledby="Stages" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                 <h4 class="modal-title" id="EditComanyModal">Add/Edit Stages</h4>

            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" method="POST">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Stage</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control required-input" name="fstage" id="fstage">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Description</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control required-input" name="fdescription" id="fdescription">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" id="cnamedel" name="cnamedel" onclick="fndelete();" data-dismiss="modal"><span class="glyphicon glyphicon-trash"></span> Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                <button type="submit" class="btn btn-success" id="cnamesave" name="cnamesave" onclick="fnsave();" disabled><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
            </div>
        </div>
    </div>
</div>

我可能会以错误的方式进行，因为那里有其他验证器，但这是一个弹出模式，所以其他一些方法会干扰。

Answer 1

您可以使用jQuery.validate执行此操作。您现在只获得验证，但您也可以向有错误的输入添加类...

使用额外的JQuery和amp;表单验证引导

1 个答案: