Check marked field as required in HTML when submitting form using JQuery

Question

I'm using Jquery .submit() function to submit my form using JQuery. But I've some fields marked as required in HTML. How should I use the .submit() function to check required field before submitting the form?

‌

here is the code

<script>
function submit() {
    $("form").submit();
}

function signup() {
    alert("You're going to sign up");
}
</script>

<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
    <div class="input">
        <label for="email">Email:</label>
        <input required="" id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required="" type="password" id="password"/>
    </div>

    <a class="submit" href="JavaScript:submit();">Sign Up</a>
    <button type="submit" class="none_display"></button>
</form>

I need to submit my form using a tag because of style changing in some browsers for button and input tags.

Answer 1

First off, it's slightly strange that you have a submit() method that you inline call, that turns around and submits the form, that then executes its inline signup() method that then actually does work. Just call the signup instead of the submit().

But for your actual question.

$(':input[required]').filter(function(){ return !this.value.trim() })

This command will find all inputs that have a required property that do not have a value. If you find any, don't do your ajax.

The below example has refactored the logic a bit, so that the submit button is actually showing, but is styled to look like a link.

 $('form').on('submit', function(e){ e.preventDefault(); var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){ return !this.value.trim(); }).length; if (!blankRequiredFieldsExist) { alert("You're going to sign up"); } });

 .buttonAsLink { border: 0; background-color: inherit; padding: 0; font-family: inherit; font-size: inherit; color: blue; text-decoration: underline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post"> <div class="input"> <label for="email">Email:</label> <input required id="email"/> </div> <div class="input"> <label for="password">Password:</label> <input required type="password" id="password"/> </div> <button type="submit" class="buttonAsLink">Sign Up</button> </form>

Answer 2

You have a few unnecessary things going on.

You don't need action="JavaScript:void(0);" on the form.

Remove <a class="submit" href="JavaScript:submit();">Sign Up</a>

 function signup() { alert("You're going to sign up"); }

 <form onsubmit="signup()"> <div class="input"> <label for="email">Email:</label> <input required="" id="email"/> </div> <div class="input"> <label for="password">Password:</label> <input required="" type="password" id="password"/> </div> <button type="submit" class="none_display">Sign up</button> </form>

Answer 3

you can make submit button and set display: none; for that. then write some function in jquery to click on your submit button when user click on your anchor link

<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
  <input type="text" required="yes" />
  <input type="submit" style="display: none;" id="mysubmit" />
  <a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>