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(); w3schools.com/jquery/event_stoppropagation.asp — son pham
– son pham, Commented Nov 15, 2018 at 8:08

Marco Bonelli · Accepted Answer · 2018-11-15 10:10:21Z

8

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, 2018 at 10:10

answered Nov 15, 2018 at 8:06

Marco Bonelli

71.1k21 gold badges129 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

CertainPerformance Over a year ago

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

Marco Bonelli Over a year ago

@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.

Ahil Khan Over a year ago

Form is still submitting if CNIC number is less than 15

Marco Bonelli Over a year ago

@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?

Ahil Khan Over a year ago

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

|

Arnab Banerjee · Accepted Answer · 2018-11-15 08:31:21Z

0

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

answered Nov 15, 2018 at 8:31

Arnab Banerjee

514 bronze badges

Comments

splattne · Accepted Answer · 2018-11-15 09:36:23Z

-1

return false;

or

event.preventDefault();

edited Nov 15, 2018 at 9:36

splattne

104k54 gold badges206 silver badges250 bronze badges

answered Nov 15, 2018 at 8:13

zhe niu

1

Comments

Moudinho · Accepted Answer · 2020-12-30 00:41:22Z

-1

You could use the peventDefault() method

answered Dec 30, 2020 at 0:41

Moudinho

6091 gold badge6 silver badges6 bronze badges

Collectives™ on Stack Overflow

Stop form submission when using JavaScript

4 Answers 4

12 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related