DEV Community

Gurpinder Singh
Gurpinder Singh

Posted on

Email ID and website URL validations in your jQuery

To implement email and website URL validations in your jQuery code, you can use regular expressions to check the format of the email address and the URL. Here's how you can modify your code to include these validations:

$.ajax({
    url: base_url + "index.php?v=1",
    type: 'post',
    data: $('#loginfm').serialize(),
    success: function(data) {
        // Parse the response data if needed
        // var data = JSON.parse(data);

        // Validate email address using regular expression
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        var email = $('#email').val();
        if (!emailRegex.test(email)) {
            var message = "<div class='output_errormessage'>Invalid email address!</div>";
            $('#output_message').css("display", "block");
            $('#output_message').html(message);
            $('#output_message').fadeIn('slow').delay(6000).fadeOut('slow');
            return;
        }

        // Validate website URL using regular expression
        var urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
        var website = $('#name').val();
        if (!urlRegex.test(website)) {
            var message = "<div class='output_errormessage'>Invalid website URL!</div>";
            $('#output_message').css("display", "block");
            $('#output_message').html(message);
            $('#output_message').fadeIn('slow').delay(6000).fadeOut('slow');
            return;
        }

        // If both email and website URL are valid, proceed with AJAX request
        $.ajax({
            url: base_url + "index.php?v=1",
            type: 'post',
            data: $('#loginfm').serialize(),
            success: function(data) {
                if (data == parseInt("1")) {
                    var message = "<div class='output_successmessage'>Thank you for providing your website information. We greatly appreciate the opportunity to connect with you. Rest assured, our team will promptly generate a comprehensive website analysis report and deliver it to you shortly. Stay tuned for valuable insights and recommendations to enhance your online presence.</div>";
                    $('#output_message').css("display", "block");
                    $('#output_message').html(message);
                    $('#output_message').fadeIn('slow').delay(6000).fadeOut('slow');
                } else {
                    var message = "<div class='output_errormessage'>Unable to send!</div>";
                    $('#output_message').css("display", "block");
                    $('#output_message').html(message);
                    $('#output_message').fadeIn('slow').delay(6000).fadeOut('slow');
                }
            }
        });
    }
});

Enter fullscreen mode Exit fullscreen mode

In this code:

We use regular expressions (emailRegex and urlRegex) to define patterns for valid email addresses and website URLs.
We extract the values of the email address and website URL from the form fields.

For more updates Follow me on LinkedIN

We use the test() method of the regular expression objects to check if the values match the defined patterns.
If the validation fails, we display an error message and prevent the AJAX request from being sent.
If both email and website URL validations pass, we proceed with the AJAX request to send the form data.

Thanks for reading,
DGi Host.com

Top comments (0)