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

我试图在我的注册表上实时显示错误，而不是重定向到另一个页面（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;
    }
}

最佳答案

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

$('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>

关于javascript - 如何在HTML表单上实时显示错误？ (包括Javascript)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27749305/