JavaScript custom validation not working

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?

Master Slave · Answer 1 · 2014-11-17T11:44:29.117

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>

edited Nov 17 '14 at 11:44

answered Nov 17 '14 at 11:39

Master Slave

27,771
4
57
55

that's the proper way, be sure to refresh properly and clear cache – Master Slave Nov 17 '14 at 11:44

score 0 · Answer 2 · answered Nov 17 '14 at 11:41

0

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();
});

answered Nov 17 '14 at 11:41

Marco Mura

582
2
13

Putting the listener on the button is a poor solution. It is far more commonly recommended (for good reasons) to put submit validation listeners on the form. – RobG Nov 17 '14 at 12:02
@RobG Why it's a poor solution and where is it recommended? For which reason? – Marco Mura Nov 17 '14 at 13:44

score 0 · Answer 3 · answered Nov 17 '14 at 11:42

0

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.

answered Nov 17 '14 at 11:42

Neeraj Kumar

1,058
1
9
22

That's one solution. But I need to know why doesn't the javascript thingy work! – The High Guy Nov 17 '14 at 11:45
The function you have written returns a value but you are not letting the form know what is the return so by default it understand true. so you need to change you form onsubmit to onsubmit="return submitform();" in this way your form will get the value from function and if false it will not submit. – Neeraj Kumar Nov 17 '14 at 11:48
jQuery is javascript. You've successfully replaced plain JS with even more jQuery (not counting the several thousand lines of jQuery itself). Cool. – RobG Nov 17 '14 at 11:59
@RobG Yes, I have replaced Plain JS with jquery because its easy to use and not very much complicated to use. I understand your words about the jquery library thousands of line of codes. But as per my understanding that jquery library is so much optimized that it will not take took much time to load and which will hamper the page loading time. – Neeraj Kumar Nov 17 '14 at 12:05

score 0 · Answer 4 · answered Nov 17 '14 at 11:43

0

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>

answered Nov 17 '14 at 11:43

Asik

7,967
4
28
34

None of them look my answer. I was posted the solution first :) – Asik Nov 17 '14 at 12:04

score 0 · Answer 5 · edited May 23 '17 at 12:20

<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

score 0 · Answer 6 · edited Nov 17 '14 at 12:29

0

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

edited Nov 17 '14 at 12:29

MarmiK

5,639
6
40
49

answered Nov 17 '14 at 12:08

TM Dinesh

210
3
13

score 0 · Answer 7 · answered Nov 17 '14 at 12:09

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 (e.g. "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>

JavaScript custom validation not working

7 Answers7