NAME CHECK AVAILABILITY EXAMPLE IN LIFERAY

JSP:


<form action="<%=editCourseURL%>" method="post" id="register-form" >
      <div class="label1">Course Name</div>
      <input type="text" id="cname" name="cname" value=" "/>&nbsp;
      <input type="submit" id="submit1" value="check availability" />&nbsp; 
       <div id="message" ></div> <br />
      <div class="label2">Course Description</div>
      <input type="text" id="cdesc" name="cdesc" value=""/><br/>
      <div class="label3">Start Date</div>
      <input type="date" name="sdate" id="sdate" value=""/><br/>
      <div class="label4">End Date</div>
      <input type="date" id="edate" name="edate" value="" /><br />
      <input type="submit" id="submit" value="Submit" />
      </form>
      <liferay-ui:success key="key" message="message" />
      <portlet:renderURL var="homeURL">
      <portlet:param name="jspPage" value="/html/course/view.jsp"></portlet:param>
      </portlet:renderURL>
      <portlet:resourceURL var="resourceURL"></portlet:resourceURL>
     
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
        
     
    // Setup form validation on the #register-form element
    $("#register-form").validate({
    
        // Specify the validation rules
        rules: {
            cname: "required",
            cdesc: "required",
            sdate: "required",
            edate: "required"
        },
        
        // Specify the validation error messages
        messages: {
        cname: "<p><font color=red>Please enter course  name</p></font>",
        cdesc: "<p><font color=red>Please enter course description</p></font>",
        sdate: "<p><font color=red>please enter start date</p></font>",
        edate: "<p><font color=red>Please enter end date</p></font>"
        },
        
        submitHandler: function(form) {
            form.submit();
        }
    });
      $("#submit1").click(function(){
             var nameVal = jQuery("#cname").val();
            
             jQuery.ajax({
                      url :'<%=resourceURL%>',
                      data:{cname:nameVal},
                      type: "POST",
                  dataType: "json",
                   success: function(data){ 
                       {
                    
            if(nameVal==data["cname"])
         {
                             
         $("#message").html("<font color=red>course name already exist.</font>");

         }    
            else
       {
                                
            $("#message").html("<font color=green>Course name available</font>");  
              }
                         
                 }
                 }
                  });
            });
      });
   

</script>

Search This Blog

All the rights are reserved to this blog is belongs to me only.. Powered by Blogger.