Web Tech

Wednesday, 13 February 2013

Regex for Name validation with atleast one alpahbet(A-z)


^[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*$

To explain: The bit in the middle square brackets (the "meat in the sandwich") matches an alphabet character.
The + after it makes sure there is at least one of these.
The other two square-bracketed expressions (the "bread in the sandwich") match alphanumeric characters.
The * after each allow any number of these.
The ^ and $ surrounding the whole thing make sure it is the whole text being looked at and not just part of it.

Tuesday, 12 February 2013

Hide a button for a specific time in jquery

Code:

  
var enableSubmit = function(a) {
    $(a).removeAttr("disabled");
}

$("#submit").click(function() {
    var button = this;
    $(this).attr("disabled", true);
    setTimeout(function() { enableSubmit(button) }, 3000);
    
});

Note:Dont forget to include the jquery.js file to run this demo.

Friday, 28 December 2012

jQuery AJAX request and response example

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<%@ page import="java.io.*" %>    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="robots" content="noindex,nofollow"/>

<title>Programmers sample guide, help is on the way</title>

<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

 //Stops the submit request

 $("#myAjaxRequestForm").submit(function(e){

        e.preventDefault();

 });

 //checks for the button click event

 $("#myButton").click(function(e){

   //get the form data and then serialize that

         dataString = $("#myAjaxRequestForm").serialize();

   //getJSON request to the Java Servlet

   $.getJSON("../CountryInfo", dataString, function( data, textStatus, jqXHR) {

           //our country code was correct so we have some information to display

            if(data.success){

             $("#ajaxResponse").html("");

             $("#ajaxResponse").append("<b>Country Code:</b> " + data.countryInfo.code + "<br/>");

             $("#ajaxResponse").append("<b>Country Name:</b> " + data.countryInfo.name + "<br/>");

             $("#ajaxResponse").append("<b>Continent:</b> " + data.countryInfo.continent + "<br/>");

             $("#ajaxResponse").append("<b>Region:</b> " + data.countryInfo.region + "<br/>");

             $("#ajaxResponse").append("<b>Life Expectancy:</b> " + data.countryInfo.lifeExpectancy + "<br/>");

             $("#ajaxResponse").append("<b>GNP:</b> " + data.countryInfo.gnp + "<br/>");

            } 

            //display error message

            else {

                   $("#ajaxResponse").html("<div><b>Country code in Invalid!</b></div>");

               }

          })

    .error(function(jqXHR, textStatus, errorThrown){

      //console.log("Something really bad happened " + textStatus);

       $("#ajaxResponse").html(jqXHR.responseText);

    })

    .beforeSend(function(jqXHR, settings){

     //adding some Dummy data to the request

     settings.data += "&dummyData=whatever";

     //disable the button until we get the response

     $('#myButton').attr("disabled", true);

    })

    .complete(function(jqXHR, textStatus){

     //enable the button 

     $('#myButton').attr("disabled", false);

    });

 });

});

</script>

</head>

<body>

<div id="allContent">

<div id="myExample">

 <form id="myAjaxRequestForm">

  <fieldset>

   <legend>jQuery getJSON() example using Java Servlets and MySQL database</legend>

    <p>

     <label for="countryCode">Country Code:</label><br />

     <input id="countryCode" type="text" name="countryCode" />

    </p>

    <p>

     <input id="myButton" type="button" value="Submit" />

    </p>

  </fieldset>

 </form>

 <div id="anotherSection">

  <fieldset>

   <legend>Response from jQuery getJSON() Request</legend>

     <div id="ajaxResponse"></div>

  </fieldset>

 </div> 

</div> 

</div>       

</body>

</html>

Friday, 7 December 2012

Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>



<title>Form Validation using jQuery - Demo</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">
        SubmittingForm=function() {
            alert("The form has been validated.");
        }

        $(document).ready(function() {
            $("#fvujq-form1").validate({
                submitHandler:function(form) {
                    SubmittingForm();
                },
                rules: {
                    name: "required",        // simple rule, converted to {required:true}
                    email: {                // compound rule
                        required: true,
                        email: true
                    },
                    url: {
                        url: true
                    },
                    comment: {
                        required: true
                    }
                },
                messages: {
                    comment: "Please enter a comment."
                }
            });
        });

        jQuery.validator.addMethod(
            "selectNone",
            function(value, element) {
                if (element.value == "none")
                {
                    return false;
                }
                else return true;
            },
            "Please select an option."
        );

        $(document).ready(function() {
            $("#fvujq-form2").validate({
                submitHandler:function(form) {
                    SubmittingForm();
                },
                rules: {
                    sport: {
                        selectNone: true
                    }
                }
            });
        });
    </script>

    <style type="text/css">
.form-div {
border: 1px #ccc solid;
padding: 10px;
width: 650px;
}

.form-div .submit {
margin-left: 155px;
margin-top: 10px;
}

.form-div .label {
display: block;
float: left;
width: 150px;
text-align: right;
margin-right: 5px;
}

.form-div .form-row {
padding: 5px 0;
clear: both;
width: 700px;
}

.form-div label.error {
width: 250px;
display: block;
float: left;
color: red;
padding-left: 10px;
}

.form-div input[type=text], select, textarea {
width: 250px;
float: left;
}

.form-div textarea {
height: 50px;
}
    </style>

</head>

<body>

<div class="form-div">
     <form id="fvujq-form1" method="post" action="">
        <div class="form-row">
      <span class="label">Name *</span>
      <input type="text" name="name">
        </div>
        <div class="form-row">
      <span class="label">E-Mail *</span>
      <input type="text" name="email">
        </div>
        <div class="form-row">
      <span class="label">URL   </span>
      <input type="text" name="url">
        </div>
        <div class="form-row">
      <span class="label">Your comment *</span>
      <textarea name="comment"></textarea>
        </div>
        <div class="form-row">
      <input class="submit" type="submit" value="Submit">
        </div>
     </form>
</div>


</body>
</html>