Javascript Jquery文本替换无法正常工作

我有一个使用jquery提交的表单，一切正常。如果出现错误，浏览器将显示该错误。但问题是，如果重新提交表单，错误不会改变。要么什么都没有，要么是另一条消息

<script>
$(document).ready(function(e) {
    $('#addNew').submit(function(e) {
        event.preventDefault();
        var err_count = 0;
        var name_err = '';
        var name_err_count = 0;
        if($('#f_name').val() === ''){
            err_count++;
            name_err_count++;
            name_err = "You need a first name";
        }else{
            name_err = '';
        }
        if($('#l_name').val() === ''){
            err_count++;
            name_err_count++;
            if(name_err_count > 0){
                name_err += " and a last name.";
            }else{
                name_err += "You need a last name";
            }
        }else{
            name_err = '';
        }
        $('#name_err').replaceWith(name_err);
    });
});
</script>

<select id="prefix"><option>Mr</option><option>Mrs</option><option>Miss</option><option>Ms</option></select>&nbsp;<input type="text" id="f_name" name="f_name" placeholder="First Name" />&nbsp;<input type="text" id="l_name" name="l_name" placeholder="Family Name" /><br />
<div class="form_err" id="name_err"></div>

$（文档）.ready（函数（e）{
$（'#addNew'）。提交（函数（e）{
event.preventDefault（）；
var err_count=0；
var name_err=''；
变量名称\错误\计数=0；
if（$（'f#u name'）.val（）=''）{
错误计数++；
name_err_count++；
name\u err=“你需要一个名字”；
}否则{
name_err=''；
}
if（$（'#l_name'）.val（）=''）{
错误计数++；
name_err_count++；
如果（名称错误计数>0）{
name_err+=“和姓氏。”；
}否则{
name_err+=“你需要一个姓”；
}
}否则{
name_err=''；
}
$（'name_err'）。替换为（name_err）；
});
});
mrsmissms

实际上，这应该是一个else if

$(document).ready(function (e) {
    $('#addNew').submit(function (e) {
        e.preventDefault();    

        if($('#f_name').val() === '' && $('#l_name').val() === ''){
                name_err = " You need a first and a last name.";
        }else if($('#l_name').val() === '' && $('#f_name').val() !== ''){
                name_err = "You need a last name";
        }else if($('#l_name').val() !== '' && $('#f_name').val() === ''){
                name_err = "You need a first name";            
        }else{
                name_err = 'Looks Good';        
        }

        $('#name_err').html(name_err);
    });
});

…现在用坚如磐石，如果有的话

---

实际上，这应该是一个else if

$(document).ready(function (e) {
    $('#addNew').submit(function (e) {
        e.preventDefault();    

        if($('#f_name').val() === '' && $('#l_name').val() === ''){
                name_err = " You need a first and a last name.";
        }else if($('#l_name').val() === '' && $('#f_name').val() !== ''){
                name_err = "You need a last name";
        }else if($('#l_name').val() !== '' && $('#f_name').val() === ''){
                name_err = "You need a first name";            
        }else{
                name_err = 'Looks Good';        
        }

        $('#name_err').html(name_err);
    });
});

…现在用坚如磐石，如果有的话

---

实际上，这应该是一个else if

$(document).ready(function (e) {
    $('#addNew').submit(function (e) {
        e.preventDefault();    

        if($('#f_name').val() === '' && $('#l_name').val() === ''){
                name_err = " You need a first and a last name.";
        }else if($('#l_name').val() === '' && $('#f_name').val() !== ''){
                name_err = "You need a last name";
        }else if($('#l_name').val() !== '' && $('#f_name').val() === ''){
                name_err = "You need a first name";            
        }else{
                name_err = 'Looks Good';        
        }

        $('#name_err').html(name_err);
    });
});

…现在用坚如磐石，如果有的话

---

实际上，这应该是一个else if

$(document).ready(function (e) {
    $('#addNew').submit(function (e) {
        e.preventDefault();    

        if($('#f_name').val() === '' && $('#l_name').val() === ''){
                name_err = " You need a first and a last name.";
        }else if($('#l_name').val() === '' && $('#f_name').val() !== ''){
                name_err = "You need a last name";
        }else if($('#l_name').val() !== '' && $('#f_name').val() === ''){
                name_err = "You need a first name";            
        }else{
                name_err = 'Looks Good';        
        }

        $('#name_err').html(name_err);
    });
});

…现在用坚如磐石，如果有的话

---

您的代码有4个问题，让我们按外观顺序解决它们：

您将事件作为变量

e

传递给提交函数，因此变量

event

是

未定义的

：

$('#addNew').submit(function(e) {
    event.preventDefault();

undefined.preventDefault（）显然会在执行时使函数崩溃（这就是它“不工作”的原因：该语句之后的所有内容都不会执行）。

修正：

那么你有：

  err_count++;
  name_err_count++;
  if(name_err_count > 0){

name\u err\u count
将始终为
>0
，因为您刚刚（后期）增加了它

解决方案：检查后增加错误计数器：

  if (name_err_count > 0) {  //you could omit the `> 0` check and inverse if/else
      // logic here
  } else {
      // logic here
  }
  err_count++;
  name_err_count++;

接下来，您的姓氏以
else
结尾
如果
-检查：

  }else{
      name_err = '';
  }

因此，如果元素
#l_name
的值被设置（因此不是
'
），则您的
name_err
字符串将被清除为
'
，即使它包含了由您之前的名字检查生成的错误消息

修复：删除它（因为初始化时您的
name\u err
已经是一个空字符串，如果没有任何错误消息，则不会被其他错误消息填充）

也看看

最后，使用
$（'#name_err'）.replacetwith（name_err）
将元素
#name_err
替换为未识别的
id
文本节点

（包含错误消息）。下次运行该函数时，没有要替换的

\name\u err

元素

要解决这个问题，您应该使用

elm.html（）

（或者不如使用

elm.text（）

）

也可以看看这个答案：

（应用上述修复）下面是您的更正代码（）：

---

PS，您可以删除

name\u error\u count

，只需检查

name\u err

的计算结果是否为

TRUE

或

FALSE

（在javascript中空字符串的计算结果为

FALSE

），并结合三元（以及一些更优化的方法）即可实现更简单/更易于阅读的代码

$(document).ready(function(e) {
    $('#addNew').submit(function(event) {
        var err_count = 0,
             name_err = '';
        event.preventDefault();
        if ($('#f_name').val() === '') { 
            name_err = 'a first name';
            err_count++;
        }
        if ($('#l_name').val() === '') {
            name_err += (name_err ? ' and ' : '')
                      + 'a last name';
            err_count++;
        }
     // example of simply adding a check (for a hobby)
     // if ($('#hobby').val() === '') {
     //     name_err += (name_err ? ' and ' : '')
     //               + 'a hobby';
     //     err_count++;
     // } 
        $('#name_err').html( name_err ? 'You need ' + name_err : '' );
    });
});

---

另一种方法是使用数组保存部分错误消息（使用

arr.push（）

添加到其中）。这样，即使在输出字符串时，您也可以使用

arr.length

跟踪/计数错误（如果您愿意，可以按节，如名称），并使用

arr.join（'and'）

将其转换为字符串：

（arr.length？）您需要“+arr.join（'and'）：”

注意：通过这种方式，您也可以通过执行

err\u count+=arr\u section\u err.length获得错误总数在每个检查块之后。换句话说，
err_count++也可以删除

看起来是这样的：

$(document).ready(function(e) {
    $('#addNew').submit(function(event) {
        var err_count = 0,
             name_err = [];
        event.preventDefault();
        if($('#f_name').val() === '') name_err.push('a first name');
        if($('#l_name').val() === '') name_err.push('a last name');
     // if($('#hobby').val() === '') name_err.push('a hobby');      // TRIVIAL
        err_count+=name_err.length;
        $('#name_err').html( name_err.length 
                           ? 'You need ' + name_err.join(' and ')
                           : ''  
                           );
    });
});


正如我刚才解释的，空字符串在javascript中是错误的，那么

if（$（'f#u name'）.val（）==''）name_err.push（'a first name'）

等于

if（！（$（'f#u name'）.val（））name_err.push（'a first name'）

等于

$('#f_name').val() || name_err.push('a first name');
$('#l_name').val() || name_err.push('a last name');  // showcasing the beauty
$('#hobby').val()  || name_err.push('a hobby');      // note alignment on ||

。如果你问我的话，那就相当优雅和简单

如您所见，您可以继续按照最初的意图动态构建错误消息（与使用if/else结构相反，该结构（重复）检查（组合）元素值，并为每个组合（如其他人所建议）提供完整的静态字符串，从而导致“工作量”呈指数级增长（检查和DOM访问）和一个相当不可维护的“意大利面”——例如，仅检查5个元素时的代码…）

希望这有帮助！
您的代码有4个问题，让我们按外观顺序解决它们：

您将事件作为变量
e
传递给提交函数，因此变量
event
是
未定义的
：

$('#addNew').submit(function(e) {
    event.preventDefault();

undefined.preventDefault（）；
显然会在执行时使函数崩溃（这就是它“不工作”的原因：该语句之后的所有内容都不会执行）。

修正：

那么你有：

  err_count++;
  name_err_count++;
  if(name_err_count > 0){

name\u err\u count
将始终为
>0
，因为您刚刚（后期）增加了它

解决方案：检查后增加错误计数器：

  if (name_err_count > 0) {  //you could omit the `> 0` check and inverse if/else
      // logic here
  } else {
      // logic here
  }
  err_count++;
  name_err_count++;

接下来，您的姓氏以
else
结尾
如果
-检查：

  }else{
      name_err = '';
  }

因此，如果元素
#l_name
的值被设置（因此不是
'
），则您的
name_err
字符串将被清除为
'
，即使它包含了由您之前的名字检查生成的错误消息

修复：删除它（因为您的
名称\u err
已经是空的