Stop form submission when using JavaScript










0















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?










share|improve this question
























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

    – son pham
    Nov 15 '18 at 8:08
















0















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?










share|improve this question
























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

    – son pham
    Nov 15 '18 at 8:08














0












0








0








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?










share|improve this 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?







javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 10:12









Marco Bonelli

23.6k116374




23.6k116374










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


















  • 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













3 Answers
3






active

oldest

votes


















2














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.






share|improve this answer

























  • 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


















0














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






share|improve this answer






























    -1














    return false; 


    or



    event.preventDefault();





    share|improve this answer
























      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


















      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









      2














      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.






      share|improve this answer

























      • 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















      2














      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.






      share|improve this answer

























      • 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













      2












      2








      2







      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.






      share|improve this answer















      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.







      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Nov 15 '18 at 10:10

























      answered Nov 15 '18 at 8:06









      Marco BonelliMarco Bonelli

      23.6k116374




      23.6k116374












      • 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
















      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













      0














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






      share|improve this answer



























        0














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






        share|improve this answer

























          0












          0








          0







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






          share|improve this answer













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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 15 '18 at 8:31









          Arnab BanerjeeArnab Banerjee

          112




          112





















              -1














              return false; 


              or



              event.preventDefault();





              share|improve this answer





























                -1














                return false; 


                or



                event.preventDefault();





                share|improve this answer



























                  -1












                  -1








                  -1







                  return false; 


                  or



                  event.preventDefault();





                  share|improve this answer















                  return false; 


                  or



                  event.preventDefault();






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 15 '18 at 9:36









                  splattne

                  83.9k45194241




                  83.9k45194241










                  answered Nov 15 '18 at 8:13









                  zhe niuzhe niu

                  1




                  1



























                      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














                      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





















































                      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







                      這個網誌中的熱門文章

                      How to read a connectionString WITH PROVIDER in .NET Core?

                      In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

                      Museum of Modern and Contemporary Art of Trento and Rovereto