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

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 。我添加了一个附加类来说明单击“提交”时选择的内容。

$( "#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() : ""; 

});

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

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