Stop form submission when using JavaScript

Question

I have a form where user enter a cnic number if this number is less than 15 then alert a msg and stop the form submission but issue is that form submission cannot stop when the cnic number is less than 15.

<script>
    function validateform()
    {

        var cnic1 = document.getElementById("cnic1").value;
        if (cnic1.length < 15)
        {
            window.alert("Invalid CNIC");
            cnic1.focus();
            return false;
        }
    }
</script>

<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">

    <div class="row">
        <div class="input-field col s1"></div>
        <div class="input-field col s4"><label>CNIC No. </label>
            <font style="color: #ff0000">*</font>
        </div>
        <div class="input-field col s6">
            <input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
        </div>
    </div>
</form>

Is there issue in php submission code write on tabs.php page that's why form still submitting process?

You can use e.stopPropagation(); https://www.w3schools.com/jquery/event_stoppropagation.asp — son pham, Nov 15 '18 at 08:08

Marco Bonelli · Accepted Answer · 2018-11-15T10:10:21.967

7

You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:

function validateform(e) { // take the event as parameter
    e.preventDefault(); // stop the submission

    var cnic1 = document.getElementById("cnic1");

    if (cnic1.value.length < 15) {
        window.alert("Invalid CNIC");
        cnic1.focus();
    } else {
        form.submit();
    }
}

var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);

I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.

edited Nov 15 '18 at 10:10

answered Nov 15 '18 at 08:06

Marco Bonelli

63,369
21
118
128

When selecting only a single element, I'd prefer `querySelector`, rather than use a method that returns a collection and proceed to select the first element in the collection – CertainPerformance Nov 15 '18 at 08:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name. – Marco Bonelli Nov 15 '18 at 08:12
Form is still submitting if CNIC number is less than 15 – Ahil Khan Nov 15 '18 at 08:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML? – Marco Bonelli Nov 15 '18 at 08:23
@AhilKhan Well, justa fter the function declaration. Amd be sure your ` – Marco Bonelli Nov 15 '18 at 08:55
`function validateform(e) { document.getElementsByName('applyform')[0].addEventListener('submit', validateform); var cnic1 = document.getElementById("cnic1").value; if (cnic1.length < 15) { window.alert("Invalid CNIC"); cnic1.focus(); e.preventDefault(); } }` – Ahil Khan Nov 15 '18 at 09:06
I changed it but still form is submit – Ahil Khan Nov 15 '18 at 09:06
Not inside the function! Outside the function. Look at my answer I edited the code. – Marco Bonelli Nov 15 '18 at 09:35
form still submitting – Ahil Khan Nov 15 '18 at 09:57
Now its working but still problem is that if **CNIC number** is 15 then form is submit but dont send the value of this **CNIC number** into database – Ahil Khan Nov 15 '18 at 11:00
Well that's another problem. Make your question clearer. – Marco Bonelli Nov 15 '18 at 11:02
but little bit my problem is solved form stop submitting – Ahil Khan Nov 15 '18 at 11:06

score 0 · Answer 2 · answered Nov 15 '18 at 08:31

0

Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.

answered Nov 15 '18 at 08:31

Arnab Banerjee

51
4

score -1 · Answer 3 · edited Nov 15 '18 at 09:36

-1

return false;

or

event.preventDefault();

edited Nov 15 '18 at 09:36

splattne

102,760
52
202
249

answered Nov 15 '18 at 08:13

zhe niu

1

score -1 · Answer 4 · answered Dec 30 '20 at 00:41

-1

You could use the peventDefault() method

answered Dec 30 '20 at 00:41

Moudinho

309
4
6

Stop form submission when using JavaScript

4 Answers4

Linked

Related