根据提交事件的子类向父元素添加类

Question

试图只针对具有class="has-error"子级的父div

我使用的是下面的内容，但是条件内的范围指的是#pdf-form。请建议如何修理。

联署材料：

$( "#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溢出代码段环境中，它不能工作，因为它们禁用提交事件，但是您可以看到它在运行这里。我添加了一个额外的类来说明当您单击submit时所选择的内容。

​

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

​

Answer 2

若要取消提交，根据您的示例，您需要检测是否任何窗体控件元素都有“具有错误”类。然后，要在这些窗体控制元素的父元素上设置类的have，需要使用.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');
    }
});