Stop form submission when using JavaScript

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?

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

asked Nov 15 '18 at 8:03

Ahil Khan

226

You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp

– son pham
Nov 15 '18 at 8:08

add a comment |

<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?

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

asked Nov 15 '18 at 8:03

Ahil Khan

226

You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp

– son pham
Nov 15 '18 at 8:08

add a comment |

<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?

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

asked Nov 15 '18 at 8:03

Ahil Khan

226

<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?

javascript

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

asked Nov 15 '18 at 8:03

Ahil Khan

226

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

asked Nov 15 '18 at 8:03

Ahil Khan

226

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

edited Nov 15 '18 at 10:12

Marco Bonelli

23.5k116373

asked Nov 15 '18 at 8:03

Ahil Khan

226

asked Nov 15 '18 at 8:03

Ahil Khan

226

asked Nov 15 '18 at 8:03

Ahil Khan

226

You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp

– son pham
Nov 15 '18 at 8:08

add a comment |

You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp

– son pham
Nov 15 '18 at 8:08

You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp

– son pham
Nov 15 '18 at 8:08

add a comment |

3 Answers
3

active

oldest

votes

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 8:06

Marco Bonelli

23.5k116373

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 8: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 8:12

Form is still submitting if CNIC number is less than 15

– Ahil Khan
Nov 15 '18 at 8:14

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

– Marco Bonelli
Nov 15 '18 at 8:23

where add the event listener line in js code??

– Ahil Khan
Nov 15 '18 at 8:48

|
show 9 more comments

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 8:31

Arnab Banerjee

112

add a comment |

-1

return false;

event.preventDefault();

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

answered Nov 15 '18 at 8:13

zhe niu

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314836%2fstop-form-submission-when-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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 8:06

Marco Bonelli

23.5k116373

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 8: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 8:12

Form is still submitting if CNIC number is less than 15

– Ahil Khan
Nov 15 '18 at 8:14

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

– Marco Bonelli
Nov 15 '18 at 8:23

where add the event listener line in js code??

– Ahil Khan
Nov 15 '18 at 8:48

|
show 9 more comments

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 8:06

Marco Bonelli

23.5k116373

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 8: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 8:12

Form is still submitting if CNIC number is less than 15

– Ahil Khan
Nov 15 '18 at 8:14

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

– Marco Bonelli
Nov 15 '18 at 8:23

where add the event listener line in js code??

– Ahil Khan
Nov 15 '18 at 8:48

|
show 9 more comments

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 8:06

Marco Bonelli

23.5k116373

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 8:06

Marco Bonelli

23.5k116373

edited Nov 15 '18 at 10:10

answered Nov 15 '18 at 8:06

Marco Bonelli

23.5k116373

answered Nov 15 '18 at 8:06

Marco Bonelli

23.5k116373

answered Nov 15 '18 at 8:06

Marco Bonelli

23.5k116373

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 8: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 8:12

Form is still submitting if CNIC number is less than 15

– Ahil Khan
Nov 15 '18 at 8:14

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

– Marco Bonelli
Nov 15 '18 at 8:23

where add the event listener line in js code??

– Ahil Khan
Nov 15 '18 at 8:48

|
show 9 more comments

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 8: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 8:12

Form is still submitting if CNIC number is less than 15

– Ahil Khan
Nov 15 '18 at 8:14

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

– Marco Bonelli
Nov 15 '18 at 8:23

where add the event listener line in js code??

– Ahil Khan
Nov 15 '18 at 8:48

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 8: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 8:12

Form is still submitting if CNIC number is less than 15

– Ahil Khan
Nov 15 '18 at 8:14

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

– Marco Bonelli
Nov 15 '18 at 8:23

where add the event listener line in js code??

– Ahil Khan
Nov 15 '18 at 8:48

|
show 9 more comments

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 8:31

Arnab Banerjee

112

add a comment |

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 8:31

Arnab Banerjee

112

add a comment |

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 8:31

Arnab Banerjee

112

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 8:31

Arnab Banerjee

112

answered Nov 15 '18 at 8:31

Arnab Banerjee

112

answered Nov 15 '18 at 8:31

Arnab Banerjee

112

answered Nov 15 '18 at 8:31

Arnab Banerjee

112

add a comment |

-1

return false;

event.preventDefault();

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

answered Nov 15 '18 at 8:13

zhe niu

add a comment |

-1

return false;

event.preventDefault();

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

answered Nov 15 '18 at 8:13

zhe niu

add a comment |

-1

return false;

event.preventDefault();

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

answered Nov 15 '18 at 8:13

zhe niu

return false;

event.preventDefault();

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

answered Nov 15 '18 at 8:13

zhe niu

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

edited Nov 15 '18 at 9:36

splattne

83.8k45194241

answered Nov 15 '18 at 8:13

zhe niu

answered Nov 15 '18 at 8:13

zhe niu

answered Nov 15 '18 at 8:13

zhe niu

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky