JavaScript自定义验证不起作用

Question

Here is my code :

<script type="text/javascript">
    function submitform() {
        if(document.getElementById('name').value=='') {
            alert('Please enter a name');
            return false;
        }
    }
</script>
<form action="mail.php" method="post" onsubmit="submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

as expected, the form when submitted should call the submitform function, and if the name field is blank, it should return false and give an alert. But, it just goes through. Any explainations?

Answer 1

You need to call the function with return, so that the false value prevents default action (form submission)

<form action="mail.php" method="post" onsubmit="return submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

Answer 2

You need to stop a little.

You can use onSubmit, but it's best to delete your input submit and put a button. Then on button click you can do what you want and eventually submit the form

Form:

<form action="mail.php" method="post" id="mailForm">
<input type="text" id="name" name="name" placeholder="name">
<button id="submitMailForm">Submit</button>

JS:

$( document ).on( "click", "#submitMailForm", function(e) {
 //My control Here
 //If all ok
 $("#mailForm").submit();
});

Answer 3

You can use jquery instead of javascript for this kind of validation is will be very easy to implement.

<form action="mail.php" method="post">
  <input type="text" id="name" name="name" placeholder="name">
  <input type="submit" value="submit" id="submit">
</form>

<script>
   $(document).ready(function(){
     $("#submit").click(fucntion(e){
        if($("#name").val() == ""){
       alert("Name is empty");
       e.preventDefault();
     }
     });
   });
</script>

And dont forget to add jquery library before the script tag.

Answer 4

You need to change your onSubmit attribute as follows

onsubmit="return submitform();"

So your html look like this

<form action="mail.php" method="post" onsubmit="return submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

Answer 5

<script type="text/javascript">
    function submitform(event) {
        if(document.getElementById('name').value=='') {
            alert('Please enter a name');
             event.preventDefault();
            return false;
        }
    }
</script>

<form action="mail.php" method="post" onsubmit="submitform(event);">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

You need to prevent default of submit. In JS return false does not stop the propagation of the "submit" function (with frameworks can be different).

I suggest you to read: event.preventDefault() vs. return false enter link description here

Answer 6

just try this script

function submitform() {
    var x = document.forms["fname"].value;
    x = x.trim(); // Remove white spaces
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
    }
}

Answer 7

To cancel submission, the listener needs to return true or false. Also, if the function validates the fields, far better to name it for what it does rather than when it does it so call it something like "validateForm".

Also, giving a control a name of "name" masks the form's own name property. While that doesn't matter here, in general it's not a good idea to give any form control a name that is the same as a standard property of a form (eg "submit" or "reset").

So you might end up with something like:

<script>
    function validateForm(form) {
        if (form.personName.value == '') {
            alert('Please enter a name');
            return false;
        }
    }
</script>

<form ... onsubmit="return validateForm(this);">
    <input type="text" name="personName">
    <input type="submit">
</form>