JSFiddle - React, Tailwind, and code Playground

by arielblues

HTML

<input type="text" id="latlng" />
<input type="button" id="testLatLng" value="Test Lat Lng" />
<div id="errorLatLng"></div>
<br />
<br />
<input type="text" id="email" />
<input type="button" id="testEmail" value="Test Email" />
<div id="errorEmail"></div>

JavaScript

v$(document).ready(function() {
    
    $('#testLatLng').click(function(){ 
        var latlngVal = /^-?([0-8]?[0-9]|90)\.[0-9]{1,6},-?((1?[0-7]?|[0-9]?)[0-9]|180)\.[0-9]{1,6}$/;
        var latlng = $("input#latlng").val();
        var invalid_latlng = 'Latitude and Longitude are not correctly typed';
        
        // Validate Latitude and Longitude
        if(!latlngVal.test(latlng)) {
                $("#errorLatLng").html(invalid_latlng);
                return false;;
        }else{
                $("#errorLatLng").html('This coordinates are valid!');
        }   
    });
    
    $('#testEmail').click(function(){
        var emailVal = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var email = $("input#email").val();
        var invalid_email = 'Please type a valid e-mail address';
                
        // If e-mail address is not empty - validate
        if (email.length !== 0) {
            if(!emailVal.test(email)) {
                // ERROR - customize
                $('#errorEmail').html(invalid_email);
                return false;
            }else
                $('#errorEmail').html('This email is valid!');
        };
    });
    
});