I have used the correct syntax of jquery but still isn't working?

Question

This jQuery form validation is not working. When I click on the submit button the Submit2 function isn't doing any validation. I'm sure I used the correct syntax and correct order of the loading of 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

• You need to use double equals == or triple equals === to check for a condition in if statements. a single = is a assignment
• Your html has one to many </div> in the end
• You can use autocomplete="off" on the form instead of doing it on every form element
• You should use form#onSubmit instead of button#onClick to let constraint validation kick in. But to do so you should change the button to type="submit" from type="button" , wish you should do anyway
  
  Now you don't need to do any validation yourself! Woho!
  
  
• You don't need the empty value ="" on attributes just by having required is enough.
• And last of all let the javascript handle the event registration part and don't do any onclick or simular on the html attributes, It could actually be safer that way if you use CSP or inserting any dynamic html templates specified by the user.
  Besides, then you don't have to cloture down the global window scope and accidentally override something. You want to avoid putting as much as you can on the global scope

 // 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) }) })

 <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>

Answer 2

the onclick needs the function to be available in the global window scope. However you have placed the function inside document.ready so it is not accessible in global scope. Using your browser console you should see error thrown that Submit2 is undefined (or not a function).

Since you are using jQuery it would be simpler to use a jQuery event handler and remove onclick from the html

$(document).ready(function() {

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

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

});

Answer 3

There are two things you have to change. DEMO

1. You have declared the function submit2() inside the document.ready which won't be visible to window scope, hence you can remove onclick submit function from the html and call the function onclick of submit in jQuery using the button id
2. You need to use "==" double equals to check for a condition

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

You are mixing JavaScript and jquery. use .click() event handler on button and secondly change '=' to '==' in if statement.

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

Using <... onclick="someFns"> to register a handle, the someFns must be accessible in the global scope. However, in your code, 'Submit2' function is inside a anonymous function, and JS using function scope, so the 'Submit2' function can only be reached inside the anonymous function.

If you want to use the <... onclick...> way to register handler, make 'Submit2' a global function.

Another way you can register the function :

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

Another thing, what do you expect the return value doing?