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?
javascript
add a comment |
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?
javascript
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08
add a comment |
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?
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?
javascript
javascript
edited Nov 15 '18 at 10:12
Marco Bonelli
23k116273
23k116273
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
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
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.
When selecting only a single element, I'd preferquerySelector
, 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.
add a comment |
return false;
or
event.preventDefault();
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
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.
When selecting only a single element, I'd preferquerySelector
, 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.
When selecting only a single element, I'd preferquerySelector
, 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.
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 BonelliMarco Bonelli
23k116273
23k116273
When selecting only a single element, I'd preferquerySelector
, 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 preferquerySelector
, 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
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
@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
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
@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
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.
add a comment |
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
add a comment |
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
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 BanerjeeArnab Banerjee
112
112
add a comment |
add a comment |
return false;
or
event.preventDefault();
add a comment |
return false;
or
event.preventDefault();
add a comment |
return false;
or
event.preventDefault();
return false;
or
event.preventDefault();
edited Nov 15 '18 at 9:36
splattne
83.3k45193240
83.3k45193240
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
1
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08