如何在HTML表单上实时显示错误？ （包括 JavaScript）

Question

我试图在注册表单上实时显示错误，而不是被重定向到另一个页面 (register.php)。

我网站的索引页有一个注册 link，它会在新的 window 中打开一个弹出注册表 (registration.HTML)。当用户提交此表单时 它调用 register.PHP 作为一个动作。 register.php里面有一行代码：

js_include('js/register.js');

此 javascript 检查某些数据是否在 registration.html 内正确提交。我希望在 提交表单之前 执行此检查 并使其重定向到 register.php。如果 javascript 说一切都好，我只需要它指向 register.php。

你可以自己测试一下here如果你点击右上角的"sign up"，然后输入乱码作为电子邮件并按回车，它将重定向到register.php并在底部显示错误（如果向下滚动）。 我希望在注册表单上显示此错误。

我尝试在 html 页面的一些脚本标签中包含以下 js，但它仍然会重定向我。

这里是register.js，欢迎大家反馈！谢谢

$(document).ready(function() {
    $('.formFieldWarning').hide();})

function checkRegisterFormSubmit() {
    $('.formFieldWarning').hide();
    var errors = 0;
    // Check the user name
    if($('#username').val() == '') {
        $('#username_warning1').show();
        errors++;
    } else {
        if ($('#username').val().length < 2 ) {
            $('#username_warning2').show();
            errors++;
        }
    }
    // Check the password
    if ($('#password').val().length < 2 ) {
        $('#password_warning1').show();
        errors++;
    } else {
        if ($('#password').val() == $('#username').val() ) {
            $('#password_warning2').show();
            errors++;
        }
    }
    // Check the password_verification
    if ($('#password_verification').val() != $('#password').val() ) {
        $('#password_verification_warning1').show();
        errors++;
    }
    // Check the email address
    if($('#email').val() == '') {
        $('#email_warning1').show();
        errors++;
    } else {
        if ($('#email').val().search(/^\w+((-|\.|\+)\w+)*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]{2,63}$/) == -1) {
            $('#email_warning2').show();
            errors++;
        }
    }
    if (errors != 0) {
        $('#form_not_submit_top').show();
        $('#form_not_submit_bottom').show();
        return false;
    } else {
        return true;
    }
}

Answer 1

这是一个如何使用 jQuery 的 blur() 函数测试表单字段的示例 -

$('input[name="foo"]').blur(function() {
  var currentValue = $(this).val();
  var testValue = 'crumple';
  if(currentValue != testValue) {
    $(this).next('span').html('FAIL');
  } else {
    $(this).next('span').html('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="foo" type="text" /><span></span>