Question

尝试仅定位具有class="has-error"

子项的父div

我使用以下内容，但条件内的范围是指#pdf-form。请告知如何解决。

JS：

$( "#pdf-form" ).submit(function( event ) {
    if ($(".form-control").hasClass("has-error")) {
        $(this).parent().addClass('has-error');
    }
    event.preventDefault();
});

HTML：

<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
    <div style="display:none">
        <input type="hidden" name="params_id" value="363">
        <input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
    </div>
    <div class="form-group">
        <label for="email" class="control-label">Email</label>
        <input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
        <div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
    </div>
    <div class="form-group">
        <label for="first_name" class="control-label">Name</label>
        <div class="row">
            <div class="col-sm-6">
                <input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
            </div>
            <div class="clearfix visible-xs" style="height: 10px;"></div>
            <div class="col-sm-6">
                <input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
            </div>
        </div>
    </div>
    <div class="form-group hidden"> 
        <label class="control-label">report</label>
        <input type="file" name="report[0]" value="" id="freeform_report0">
    </div>
    <input type="hidden" name="pdf_press_entries" value="77|8">
    <input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
    <input type="hidden" name="pdf_press_upload_fieldname" value="report">
    <input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
    <p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>

Answer 1

目前还不清楚你到底要找什么。我怀疑你的初始设置不太正确，但这应该让你知道如何访问包含错误控件的父元素。

它在Stack Overflow片段环境中无法使用，因为它们会禁用提交事件，但您可以看到它正在运行 here 。我添加了一个额外的类来说明单击“提交”时选择的内容。

＆＃13;

$( "#pdf-form" ).submit(function( event ) {
   
    var $errorElements = $(".form-control.has-error");

    $errorElements.parent().addClass('added-error');
    
    // If there are error elements, don't submit the form
    $errorElements.length > 0 ? event.preventDefault() : ""; 

});

＆＃13;

.has-error { background:red; }
.added-error { border:2px solid black; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
    <div style="display:none">
        <input type="hidden" name="params_id" value="363">
        <input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
    </div>
    <div class="form-group">
        <label for="email" class="control-label">Email</label>
        <input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
        <div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
    </div>
    <div class="form-group">
        <label for="first_name" class="control-label">Name</label>
        <div class="row">
            <div class="col-sm-6">
                <input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
            </div>
            <div class="clearfix visible-xs" style="height: 10px;"></div>
            <div class="col-sm-6">
                <input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
            </div>
        </div>
    </div>
    <div class="form-group hidden"> 
        <label class="control-label">report</label>
        <input type="file" name="report[0]" value="" id="freeform_report0">
    </div>
    <input type="hidden" name="pdf_press_entries" value="77|8">
    <input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
    <input type="hidden" name="pdf_press_upload_fieldname" value="report">
    <input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
    <p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>

＆＃13;

Answer 2

要取消提交，根据您的示例，您需要检测是否有任何表单控件元素具有has-error类。然后，要在这些表单控件元素的父元素上设置类的错误，您需要使用.each（）方法而不是您尝试过的方法。

这样的事情：

$( "#pdf-form" ).submit(function( event ) {
    if ($(".form-control").hasClass("has-error").length > 0){
        event.preventDefault();
    } 
    $(".form-control").hasClass("has-error").each(function() {
        $(this).parent().addClass('has-error');
    }
});

基于子类 - 在提交事件内部 - 向父元素添加一个类

2 个答案: