Question

这个jQuery表单验证不起作用。当我点击 ~~submit~~ 按钮时，Submit2功能没有进行任何验证。我确信我使用了正确的语法和正确加载jQuery的顺序。

<div id="signup_teacher">
<form class="form_signin" id="teacher-form" method="post" action="">
<h2 class="form_signin_heading signin_header">Signup.</h2>
            <div class="field" data-fieldname="name">
                <div class="prompt_name">
                    <input type="text" required="" autocomplete="off" maxlength="20" placeholder="Full Name" id="fullname2">
                </div>
            </div>

            <div class="prompt_email">
                <div class="field" data-fieldname="email">
                    <input type="email" required="" autocomplete="off"  placeholder="Email" id="email2">
                </div>
            </div>

            <div class="prompt_teacher_id">
                <div class="field" data-fieldname="teacher_id">
                    <input type="number" required="" autocomplete="off" maxlength="7" placeholder="Id" id="idno2">
                </div>
            </div>

            <div class="prompt_password">
                <div class="field" data-fieldname="password">
                    <input type="password" required="" autocomplete="off" placeholder="Password" id="pswrd2">
                </div>
            </div>

            <div class="btn-group sign-up-box">
                <button type="button" class="btn btn-block btn-lg btn-primary " id="submit2" onclick="Submit2">Submit</button>
            </div>

    </form>
    </div>

</div>

$(document).ready(function()
{

    function Submit2()
    {
        var fullname2=$("#fullname2").val();
        var email2=$("#email2").val();
        var idno2=$("#idno2").val();
        var pswrd2=$("#pswrd2").val();


        if($("#fullname2").val()="")
        {
              $("#fullname2").focus();
                return false;
        }
        if($("#email2").val()="")
        {
            $("#email2").focus();
            return false;
        }
        else if($("#idno2").val()="")
        {
            $("#idno2").focus();
            return false;
        }
        else if($("#pswrd2").val()="")
        {
              $("#pswrd2").focus();
            return false;
        }

    }


});

Answer 1

您需要使用双等于==或三等于===来检查if语句中的条件。单个=是作业
你的html最后有一对多</div>
您可以在表单上使用autocomplete="off"，而不是在每个表单元素上执行
您应该使用form#onSubmit代替button#onClick让constraint validation启动。但要这样做，您应该将按钮更改为type="submit"，type="button"，希望你能做什么

现在你不需要自己做任何验证！ Woho！
只需让=""足够，您就不需要属性上的空值required。
最后让javascript处理事件注册部分，不要对html属性进行任何onclick或simular，如果使用CSP或插入任何动态，它实际上可能更安全用户指定的html模板。
此外，你不必克服全局窗口范围并意外覆盖某些东西。你想避免在全球范围内尽可能多地投入

＆＃13;

// short for document ready
// https://api.jquery.com/ready/
jQuery($ => {

    // Here we use form#onSubmit instead of button click to
    // let the constraint validation kick in
    $('#teacher-form').on('submit', evt => {
        // Disable default behaviour (stop from submitting)
        evt.preventDefault()
        // This should always be true... since this only happens when the form is valid
        let valid = evt.target.checkValidity() ? 'valid' : 'invalid'
        alert('The form is ' + valid)
    })

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="signup_teacher">
  <form class="form_signin" id="teacher-form" method="post" action="" autocomplete="off">
    <h2 class="form_signin_heading signin_header">Signup.</h2>

    <div class="field" data-fieldname="name">
      <div class="prompt_name">
        <input type="text" required autocomplete="off" maxlength="20" placeholder="Full Name" id="fullname2">
      </div>
    </div>

    <div class="prompt_email">
      <div class="field" data-fieldname="email">
        <input type="email" required placeholder="Email" id="email2">
      </div>
    </div>

    <div class="prompt_teacher_id">
      <div class="field" data-fieldname="teacher_id">
        <input type="number" required maxlength="7" placeholder="Id" id="idno2">
      </div>
    </div>

    <div class="prompt_password">
      <div class="field" data-fieldname="password">
        <input type="password" required placeholder="Password" id="pswrd2">
      </div>
    </div>

    <div class="btn-group sign-up-box">
      <button type="submit" class="btn btn-block btn-lg btn-primary" id="submit2">Submit</button>
    </div>

  </form>
</div>

＆＃13;

Answer 2

onclick需要该函数在全局窗口范围内可用。但是，您已将函数放在document.ready中，因此无法在全局范围内访问它。使用浏览器控制台，您应该会看到错误抛出Submit2未定义（或不是函数）。

由于您使用的是jQuery，因此使用jQuery事件处理程序并从html中删除onclick会更简单

$(document).ready(function() {

  function Submit2() {
    // your existing function code
  }

  $('#teacher-form').on('submit', Submit2);

});

Answer 3

你必须改变两件事。的 DEMO

您已在submit2()内声明了document.ready这个窗口范围不可见的函数，因此您可以从html中删除onclick提交函数，调用提交的函数onclick在jQuery中使用按钮ID

您需要使用"==" double equals来检查条件

<强> HTML

<button type="button" class="btn btn-block btn-lg btn-primary " id="submit2" >Submit</button>

<强>的jQuery

$(document).ready(function() { $('#submit2').click(function() { var fullname2=$("#fullname2").val(); var email2=$("#email2").val(); var idno2=$("#idno2").val(); var pswrd2=$("#pswrd2").val(); if($("#fullname2").val()=="") { $("#fullname2").focus(); return false; } if($("#email2").val()=="") { $("#email2").focus(); return false; } else if($("#idno2").val()=="") { $("#idno2").focus(); return false; } else if($("#pswrd2").val()=="") { $("#pswrd2").focus(); return false; } }); });

Answer 4

您正在混合使用JavaScript和jquery。在按钮上使用.click()事件处理程序，然后在if语句中将'='更改为'=='。

    $('#submit2').click(function() {
    	var fullname2=$("#fullname2").val();
        var email2=$("#email2").val();
        var idno2=$("#idno2").val();
        var pswrd2=$("#pswrd2").val();


        if($("#fullname2").val()=="")
        {
              $("#fullname2").focus();
                return false;
        }
        else if($("#email2").val()=="")
        {
            $("#email2").focus();
            return false;
        }
        else if($("#idno2").val()=="")
        {
            $("#idno2").focus();
            return false;
        }
        else if($("#pswrd2").val()=="")
        {
              $("#pswrd2").focus();
            return false;
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="signup_teacher">
<form class="form_signin" id="teacher-form" method="post" action="">
<h2 class="form_signin_heading signin_header">Signup.</h2>
            <div class="field" data-fieldname="name">
                <div class="prompt_name">
                    <input type="text" required="" autocomplete="off" maxlength="20" placeholder="Full Name" id="fullname2">
                </div>
            </div>

            <div class="prompt_email">
                <div class="field" data-fieldname="email">
                    <input type="email" required="" autocomplete="off"  placeholder="Email" id="email2">
                </div>
            </div>

            <div class="prompt_teacher_id">
                <div class="field" data-fieldname="teacher_id">
                    <input type="number" required="" autocomplete="off" maxlength="7" placeholder="Id" id="idno2">
                </div>
            </div>

            <div class="prompt_password">
                <div class="field" data-fieldname="password">
                    <input type="password" required="" autocomplete="off" placeholder="Password" id="pswrd2">
                </div>
            </div>

            <div class="btn-group sign-up-box">
                <button type="button" class="btn btn-block btn-lg btn-primary " id="submit2">Submit</button>
            </div>

    </form>
    </div>

Answer 5

使用＆lt; ... onclick =＆＃34; someFns＆＃34;＆gt;要注册句柄，必须可以在全局范围内访问someFns。但是，在您的代码中，＆＃39; Submit2＆＃39;函数是一个匿名函数，而JS使用函数作用域，所以＆＃39; Submit2＆＃39;函数只能在匿名函数内部到达。

如果你想使用＆lt; ... onclick ...＆gt;注册处理程序的方法，使＆＃39; Submit2＆＃39;全球功能。

您可以注册该功能的另一种方式：

$(function(){
function Submit2 () {
...
}
$('#submit2').click(Submit2);
})

另一件事，你期望返回值做什么？

我使用了正确的jquery语法，但仍然无效？

5 个答案: