How to verify that email field is not blank before submitting form

Updated Question:

I added "required" to all fields, except the form will still submit if

first@second is used as the email. It submits even if missing the .com (or whatever).

How can I incorporate this validation too?

Thanks!

Original Question:

My site has a sign-up form with just an email field. Currently there are validators in place to verify the proper syntax of an entered e-mail, but the form will submit if the field is left blank. I need to verify that the field is not blank before submission. If it's blank, there should be some message that appears - similar to the ones that appear is no @ symbol is included for instance.

My demo page is here.

The form html:

 <div class='form animated flipInX'>
  <h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">

 <input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">

    <button class='animated infinite pulse'>Let's Go!</button>
  </form>
</div>

Any suggestions? Thank you

Answers


Use required in your input tags

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

So your input should be

<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required>

Look here for more information

Update :

type="email" is the common attribute of html5. If you need to validate you shall use the patten inside your input element

You shall use pattern="[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b

Here is the one use should use

<input type="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">

Here is the jsfiddle as per your updated question


You can add required attribute in input tags.


<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required="true">

Luckily it's that easy


The best way to do this to add required attribute in input tags


Please check this solution in which i using jquery to check it is blank or filled

<div class='form animated flipInX'>
<h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post"  method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">
<button class='animated infinite pulse' type="submit" onClick="checkval();">Let's Go!</button>
 </form>
</div>
 <script>
  function checkval()
  {
     var email_val=$("#MERGE0").val();
     if(email_val.length>2) 
     {
     }
     else
     {
        alert("email is required.");/*there you change show the value which you want to show as a error message.*/
         event.preventDefault();
         /* this help to stop submit form*/ 
     }

   }
   </script>

hopefully this may help you


I don't know if your question has been answer, but try this:

//The Input
<input type='email' id='email' placeholder='email' onchange='emailCheck()'>
//The Button
<button id='button' style='visibility:hidden'>Submit</button>
//Javascript
<script>
var input = document.getElementById('email').value;
if(input.indexOf("@") > -1){

if(input.indexOf(".com") >= input.length - 4){
document.getElementById('button').style.visibility = 'visible';
}else{
alert('Custom Invalid Email Alert');
}

}else{
alert('Custom Invalid Email Alert');
}
</script>

required is best option or u can use java script

like this

    <script type="text/javascript">
          function validateForm()
        {
          var a=document.forms["Form"]["answer_a"].value;
        var b=document.forms["Form"]["answer_b"].value;
       var c=document.forms["Form"]["answer_c"].value;
        var d=document.forms["Form"]["answer_d"].value;
                   if (a==null || a=="",b==null || b=="",c==null || c=="",d==null             || d=="")
         {
           alert("Please Fill All Required Field");
          return false;
           }
        }
        </script>

          <form method="post" name="Form" onsubmit="return         validateForm()" action="">
           <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
             <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
           <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
           <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
      </form>

Need Your Help

cookie disclaimer popup with http session?

c# .net session cookies

Do i need a cookie disclaimer popup if i have a aspnet website with session state variables on server side and local storage of some variables on the client?

Highlight exact string with jquery using contains selector

jquery string match

I'm trying to highlight all fields that contain a certain string exactly, in the example below I will also match someuser2, someuser3 etc.