Skip to main content

Email already exists using jQuery

It is the common requirement for any web application either it is PHP, .net, JSP etc., which has users involved. When creating/adding user from admin or end user registration we should check whether username or email address already exists. It will help to have unique registrations to our application and avoid confusion between various users. 

 I see many developers struggle with this by submitting the form to server side script and validate their from database, in case username/email address already exists they take the pain to go back to previous page or form and show the error message with other form data filled. 

 Few use AJAX to send the information onblur or onkeyup or onkeydown but face difficulties to stop form submission. Here is the simple solution that would help in validating username or email address existence without much hassle. 

 Solution comes from popular jQuery Validator plugin I'm using this from ages. 

 HTML Code:
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
        <script>
              $(function(){
                    $('#UserForm').validate({
                           rules:{
                                   Name: {required: true},
                                   EmailID: { required: true, email: true, 
                                     remote: {
                                        url: "http://localhost/user/check-email",
                                        type: "post",
                                        data: {
                                              EmailID: function() {
                                                  return $( "#EmailID" ).val();
                                              },
                                              UserID: $('#UserID').val()
                                        }
                                     }
                                 }
                           }   
                    });
              });
        </script>
    </head>
    <body>
        <form action="" id="UserForm" method="post" name="UserForm">
            Name: <input id="Name" name="Name" type="text" />
            Email ID: <input id="EmailID" name="EmailID" type="text" />
            <input id="UserID" name="UserID" type="hidden" value="0" />
            <input id="Submit" name="Submit" type="submit" value="Submit" />
        </form>
</body>
</html>
 The remote block will do the trick, it sends the current field value to server side URL "http://localhost/user/check-email". This URL can be any file URL where it sends EmailID value using POST method and there you've to write SQL query to search in DB and if exists print 'false' otherwise 'true'. (Note: don't write return true or return false, just print true or false in quotes)

 We can pass UserID as zero for new insertion for update UserID can be unsigned integer so that you can check if EmailID is same for other than selected UserID.
Labels:

Comments

Post a Comment

Want to tell something about this post. Please feel free to write...

Popular posts from this blog

PHP script to upload file securely

How to Write a Secure PHP Script for File Uploads File uploads are a common feature in web applications, but they can introduce significant security risks if not handled properly. In this article, we'll walk through the steps to securely upload files to a server using PHP. We'll cover key security measures such as file validation, limiting file types, setting file size limits, and managing file storage. We will also create reusable functions to handle the upload process. 1. Create the HTML Form First, we need an HTML form that allows users to select and upload a file. Ensure that the form uses the POST method and includes the enctype="multipart/form-data" attribute. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Secure File Upload</title> </head> <body> <form action="upload.php" method="post" enctype="multipart/...
Post a Comment
Find more....

The 7 Types of Leadership: Inspiring Examples and Insights

Leadership is a multifaceted concept with various styles that cater to different needs and situations. Understanding these styles can help you develop your leadership skills and adapt to diverse scenarios. In this article, we'll explore seven prominent leadership styles, each accompanied by insightful examples from influential authors. Let's dive in! Type 1: Transformational Leadership 🚀 Transformational Leadership: Inspiring Change and Innovation Transformational leadership focuses on inspiring and motivating followers to achieve extraordinary outcomes and, in the process, develop their own leadership capacity. Example from Author: James MacGregor Burns James MacGregor Burns, in his book "Leadership," describes transformational leaders as those who seek to change the status quo by appealing to their followers' values and sense of higher purpose. 🔸 Characteristics: - Inspirational Motivation - Intellectual Stimulation - Individualized Consideration - Idealized I...
Post a Comment
Find more....

Multiple Checkboxes Validation

This is a regular problem and solution is hardly available on google. When we use multiple checkboxes of same group (same name with square brackets) and you've to read the values from server side, then below solution will help you. Here I'm using jQuery (https://jquery.com/) and jQuery Validate plugin (https://jqueryvalidation.org/) For an example, I've to ask a user which of the listed book they are interested to know about <form id="BooksForm" method="post" name="BooksForm"> <p>Books you are interested in </p> <input class="Books" id="Book1" name="Books[]" type="checkbox" value="1" /> The Inner Game of Tennis <br /> <input class="Books" id="Book2" name="Books[]" type="checkbox" value="1" /> Monk who sold his ferrari <br /> <input class="Books" id="Book3" name=...
Post a Comment
Find more....