Javascript 基于submit事件内部的子类向父元素添加类

尝试仅针对具有子级的父div，该子级具有

class=“has error”

我使用的是以下内容，但conditional的范围是指

#pdf表单

。请告知如何修复

JS:

HTML:

电子邮件
请输入有效的电子邮件地址
名称
报告

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

---

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

它在堆栈溢出代码段环境中不起作用，因为它们禁用了提交事件，但您可以看到它在工作。我添加了一个额外的类来说明当您单击submit时将选择什么

$（“#pdf表单”）。提交（功能（事件）{
var$errorElements=$（“.form-control.has-error”）；
$errorElements.parent（）.addClass（'added-error'）；
//如果存在错误元素，请不要提交表单
$errorElements.length>0？event.preventDefault（）：“”；
});
。出现错误{背景：红色；}
.添加错误{边框：2px纯黑色；}

电子邮件
请输入有效的电子邮件地址
名称
报告

$（此）
仅在循环或事件中可用，因此不能使用
if
重新查看
$（此）
。只需将
$（“.form control”）
设置为等于一个变量，如
var$formControl=$（“.form control”）
作为提交中的第一行，然后执行
if（$formControl.hasClass（“has error”））$formControl.parent（）.addClass（“has error”）
您说：“尝试只针对具有class=“
有错误”
“的子级的父级div。为此，您需要：
$（“div>.has error”）
。但是，你需要更清楚。。。什么的父div？请添加您的HTML代码，而且似乎您应该在条件之前使用event.preventDefault（）。尝试使用选择器-$（“.form control”）。has（“.has error”）。addClass（'has-error'）使用HTMLWell更新了问题，在添加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>

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