How Do I Validate My Texbox Using Javascript

Question

0.00/5 (No votes)

See more:

I have an email textbox (required field) and a button. I want that whenever a user puts his mail id and clicks the button a JavaScript popup should appear.

My problem is when I click the button, that popup is appearing before the required-field msg.

I want JavaScript code written in a way that if textbox is empty then it will show a "please enter email id" validation message and if user gives his email id then that popup will appear; otherwise not.

pls help me out

this is my HTML

XML

<div class="input-append">
              <input type="email" id="email" name="email" placeholder="Your Email"/>
              <button class="subscribe-button btn" type="submit" onclick="myFunction()">SUBSCRIBE</button>
            </div>

and this is my javascript

XML

<script type="text/javascript">
function myFunction() {
    alert("You have done it");
}
</script>

Posted 14-Sep-14 19:04pm

Vivek Saha

Add a Solution

5 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ali64b · Answer 1 · 2014-09-22T03:05:00

XML

Hi,Try This :-)

<html>
    <body>
       <form id="MainForm">
        <input type="email" id="inputEmail" required/>
        <input type="submit" id="cmd" value="Submit"/>
        <script type="text/javascript">
            var cmd=document.getElementById("cmd");
                cmd.onclick=function(e){
                    var form=document.getElementById("MainForm");
                    if (form.checkValidity()){
                        showStatus("You have done it");
                    }
                }
                function showStatus(e){
                    alert(e);
                }
        </script>
        </form>
    </body>
</html>

Suraj Sahoo | Coding Passion · Answer 2 · 2014-09-22T02:48:00

Solution 4

fiddle to check the email required field[^]

Please check out this fiddle, I hope this solves your problem.
If not reply back.. :)
Thanks
Happy Coding :)

Posted 22-Sep-14 2:48am

Suraj Sahoo | Coding Passion

Sibeesh KV · Answer 3 · 2014-09-22T00:36:00

Just call the below method

C#

function checkEmail() {

    var email = document.getElementById('txtEmail');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email.value)) {
    alert('Please provide a valid email address');
    email.focus;
    return false;
 }

Read more here
http://www.w3resource.com/javascript/form/email-validation.php[^]

KaushalJB · Answer 4 · 2014-09-14T20:24:00

Solution 2

Refer this link : Email Address Validation in JavaScript using Regular Expressions

Posted 14-Sep-14 20:24pm

KaushalJB

Snesh Prajapati · Answer 5 · 2014-09-14T20:14:00

You need to write something like this:

C#

function myFunction() {
       var enteredEmail = document.getElementById('email').value;
       if (enteredEmail == "") {
           alert("Please enter email id");
       }
       else {
           alert("You have done it");
       }
   }

There are a lot of tutorials available just google for it.

How Do I Validate My Texbox Using Javascript

5 solutions

Solution 5

Solution 4

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0