javascript - 如何在HTML表单上实时显示错误？ (包括 JavaScript)

Question

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

我网站上的索引页有一个注册链接，可在新窗口中打开弹出注册表单 (registration.HTML)。当用户提交此表单时 它调用 register.PHP 作为操作。在register.php里面有一行代码:

js_include('js/register.js');

此 JavaScript 检查 Registration.html 中的某些数据是否正确提交。我希望在提交表单之前执行此检查 并使其重定向到register.php。如果 javascript 表示一切正常，我只需要它直接访问 register.php。

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

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

这里是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>