0

I want when my input field of a form is empty it shows me alert and stops form submission. Now problem with my code is that it only shows alert but does not stop form submission . Here my html input field and script:

function required() {
  var empt = document.forms["me_validate"]["insert_vender_emails"].value;
  if (empt == "") {
    alert("Please fill out the vendor email field");

  }

}
<form enctype="multipart/form-data" id="validate-me" method="post" class="form-horizontal" action="phpcode_class.php" role="form" name="me_validate" onsubmit="return required()">
  <textarea type="text" id="tags" name="insert_vender_emails" class="form-control" placeholder="">
    <?php if($n_vendors!='' ) { echo $n_vendors; } else { echo $rfq[ 'vender_emails']; } ?>
  </textarea>
</form>

I really got stuck in this. Please help me to get rid out of this...thanks in advance

Naeem Ul Wahhab
  • 2,465
  • 4
  • 32
  • 59
Pardeep
  • 81
  • 1
  • 2
  • 11

9 Answers9

0
<html><head>
    <script type="text/javascript">

        function submit_form() {
            if (conditions) {
                document.forms['myform'].submit();
            }
            else {
               alert("Validation Failed;");
            }
        }

    </script>
</head><body>

    …

    <input type="button" name="submit" value="submit" onclick="submit_form();"/>

</body></html>
Adam Katz
  • 14,455
  • 5
  • 68
  • 83
suman das
  • 357
  • 1
  • 12
  • 1
    Please describe what you changed, and why. Quality answers not only show, but also explain the solution. – Hexaholic Jul 21 '16 at 08:59
  • 2
    While this code may answer the question, providing additional context regarding *how* and/or *why* it solves the problem would improve the answer's long-term value. – Michael Parker Jul 21 '16 at 16:54
0

Try this,

        <script>
          function required()  
          {  
            var empt = document.forms["me_validate"]  ["insert_vender_emails"].value;  
            if (empt == "")  
            {  
              alert("Please fill out the vendor email field");  
               return false;
               }  

           }  

        </script>
Keyur Chavda-kc1994
  • 1,045
  • 1
  • 13
  • 28
0

Please put return false; after alert message. Please check below code.

<script>
    function required()  
    {  
        var empt = document.forms["me_validate"]["insert_vender_emails"].value;  
        if (empt == "")  
        {  
            alert("Please fill out the vendor email field");  
            return false;

        }  

    }  
</script>
Rahul Patel
  • 5,248
  • 2
  • 14
  • 26
  • Please use $.trim() function as well it will remove unnecessary spaces as well from the textbox. for e.g. $.trim(empt). – Rahul Patel Jul 21 '16 at 09:03
  • And one more thing can you please get the textarea value using. var empt = $("#tags").val(); or if no jquery added then use following code. var empt = document.getElementById("tags").value; – Rahul Patel Jul 21 '16 at 09:05
0

When you submit the form it will reload all page again.

Use return false to overcome this situation.

<script>
 function required()  
 {  
   var empt = document.forms["me_validate"]["insert_vender_emails"].value;  
   if (empt == "")  
   {  
      alert("Please fill out the vendor email field");
      return false;
   }  
 } 
</script>
Sandip - Frontend Developer
  • 14,397
  • 4
  • 35
  • 61
0

May be you are not selecting element properly,

function required()  
{  
 var empt = document.getElementById("tags").value;  
 if (empt == "")
 {  
    alert("Please fill out the vendor email field");
    return false;
 }  
}
Niklesh Raut
  • 34,013
  • 16
  • 75
  • 109
0

After alert pop up message,try to return some thing to the form.

 <script>
     function required()  
      {  
        var empt = document.forms["me_validate"]["insert_vender_emails"].value;  
        if (empt == "")  
         {  
           alert("Please fill out the vendor email field");  
            return false;
         }  
          return (true);

      }  

 </script>
Tejas Jain
  • 162
  • 1
  • 8
0

use the new HTML5 required attribute

<textarea type="text" id="tags" name="insert_vender_emails" class="form-control" placeholder="" required></textarea>

http://www.w3schools.com/tags/att_input_required.asp

Keep in mind that, with this way you cannot validate input data. Validation exist only at server-side of an appication. have a look at this post too

Community
  • 1
  • 1
dios231
  • 714
  • 1
  • 9
  • 21
0

call required function onsubmit() and return false if textarea is empty

<form enctype="multipart/form-data" id="validate-me" method="post" class="form-horizontal" action="phpcode_class.php" role="form"  name="me_validate" onsubmit="return required()">
    <textarea type="text" id="tags" name="insert_vender_emails" class="form-control" placeholder="" ><?php if($n_vendors!='') { echo $n_vendors; } else { echo $rfq['vender_emails']; } ?></textarea>
    <input type="submit" value="submit" name="submit" onsubmit="required()">
    </form>

    <script>
    function required()  
    {  
    var empt = document.forms["me_validate"]["insert_vender_emails"].value;  
    if (empt == "")  
    {  
    alert("Please fill out the vendor email field");  
    return false;
    }

    }  

    </script>
Passionate Coder
  • 7,154
  • 2
  • 19
  • 44
0

You can use HTML5 "required" validation as :

<textarea type="text" id="tags" name="insert_vender_emails" class="form-control" placeholder="" required>
       <?php if($n_vendors!='' ) { echo $n_vendors; } else { echo $rfq[ 'vender_emails']; } ?>
   </textarea>

OR

Simply write "return false;" after alert message in your required function like :

   function required() {


 var empt = document.forms["me_validate"]["insert_vender_emails"].value;


if (empt == "") {
alert("Please fill out the vendor email field");
return false;


}

}
Milind Shinde
  • 31
  • 2