Stop form submission on empty input field
Question
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
9 answers
solution1
0 2016-07-21 08:57:47
<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>
solution2
0 2016-07-21 08:59:23
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>
solution3
0 2016-07-21 09:01:35
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>
solution4
0 2016-07-21 09:02:08
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>
solution5
0 2016-07-21 09:04:07
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;
}
}
solution6
0 2016-07-21 09:13:51
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>
solution7
0 2016-07-21 09:15:52
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
solution8
0 2016-07-21 09:16:05
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>
solution9
0 2016-07-21 11:31:14
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.