?
Solved

jquery plug in.

Posted on 2011-09-04
19
Medium Priority
?
409 Views
Last Modified: 2012-05-12
I am trying to create a j-query plug in for my program in javascript, how do I use it?

==
I want to do a validation for example of Java script (SSN Validation)

var RE_SSN = /^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$/;

How can I write a Jquery plug in?


0
Comment
Question by:vkchaitu82
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 8
19 Comments
 

Author Comment

by:vkchaitu82
ID: 36482251
I know the regular expression in Java script for the above example:
=
Can this is what I came up with...but can you pl let me know more detail how I can make it as a plug in

(function( $ ){

  $.fn.validate = function() {
 
 /^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$/;
    });

    return max;
  };
})( jQuery );
0
 
LVL 47

Expert Comment

by:for_yan
ID: 36482264
why does it belong to Java Programming Language?
0
 

Author Comment

by:vkchaitu82
ID: 36482280
yan, Tried to remove Java but could not will take care next time..
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36482292
what is this plug-in about? give some more details
0
 

Author Comment

by:vkchaitu82
ID: 36482313
Thanks Gurvinder.

I am trying to understand and use customized JQuery plugins.
so that I can avoid the repetition of code in my Java Script.
==
so for example if I want to use the regular expression for SSN Valodation, I used to use the function:

var RE_SSN = /^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$/;

function checkvaluessn(ssn)
{
if(RE_SSN(ssn)
alert("VALID");
}

I want to write this as the plug in so that I can just use the plugin.

also please let me know how I can use plug...

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36482356
(function( $ ){

    $.fn.validate = function() {
 
       var str = this;
       var re = new RegExp("^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$", "g");
       var myArray = str.match(re);

       if ( myArray != null)
       {
          return true;
       }
       return false;
  };
})( jQuery );

var inputStr = "anyString";
alert(inputStr.validate ());
0
 

Author Comment

by:vkchaitu82
ID: 36482372
As I mentioned I tried this but having issues...while using across files.

Can you tell me how I can have this plug in across my Javascript files
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36482377
you just need to put this code in one javascript file and include that file in your HTML using script tag, then it will be available across the javascript files also
0
 

Author Comment

by:vkchaitu82
ID: 36482602
Thanks for answering and clarifying me..my last question is :

Can you give me a example of using the plug in in Java Script and browser..As we are using Jquery should be do any declarations?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36482610
<<As we are using Jquery should be do any declarations?>>
you just need to include jquery library in your HTML using script tag


<<Can you give me a example of using the plug in in Java Script and browser>>
check this
http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner
http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial
0
 

Author Comment

by:vkchaitu82
ID: 36486476
Can you pl correct me what is that I am missing..
I am trying to use the Jquery plug in.
==
main html page:
<html>
<head>
<title>Checker</title>


<head>

</head>

<body>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"> </script>
<script type ="text/javascript" src="sample.js"></script>
<script type ="text/javascript" src="extension.js"></script>

</body>
</html>

===
extensions.js
<script type="text/javascript">
$(document).ready(function()  {
 validate();
});
</script>
===
sample.js

<script>

(function($){
    $.fn.validate = function() {
 
       var str = '12345';
       var re = new RegExp("^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$", "g");
       var myArray = str.match(re);

       if ( myArray != null)
       {
          return true;
       }
       return false;
 };
})( jQuery );

</script>

==
I am having issues in making this work..
I am trying to use jquery custom API in html..(Looks I am missing some thing basic)
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36486524
what does alert(validate()); gives you?

0
 

Author Comment

by:vkchaitu82
ID: 36486556
Thanks again.

I am getting these errors in firefox:
==
missing } in XML expression
sample.js
Line 15

missing } in XML expression
extension.js
Line 3


with out trying alert(validate)
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36486565
Is it possible for your add the code properly using 'Code' tab below, and then point to the correct line in that code? Or even better, please share the live internet link for the same
0
 

Author Comment

by:vkchaitu82
ID: 36486628
attached is the snipp.

I dont have livelink

missing } in XML expression
sample.js
Line 15
==
missing } in XML expression
extension.js
Line 3
<script> 

(function($){
    $.fn.validate = function() {
 
       var str = '12345'; 
       var re = new RegExp("^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$", "g");
       var myArray = str.match(re);

       if ( myArray != null) 
       {
          return true;
       }
       return false;
 };
})( jQuery );

</script>

--
sample.js

Open in new window

<script type="text/javascript">
$(document).ready(function()  {
 validate();
});
</script>
--
extension.js

Open in new window

<html>
<head>
<title>Checker</title>


<head>

</head>

<body>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"> </script>
<script type ="text/javascript" src="sample.js"></script>
<script type ="text/javascript" src="extension.js"></script>

</body>
</html>

Open in new window

0
 

Author Comment

by:vkchaitu82
ID: 36486645
Actually I want to have a form in that give the value and get that validated..as I could not achieve that I hard coded the values
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36486677
replace extension.js by

$(document).ready(function()  {
      
    alert($(document).validate());
});


and remove script opening and closing tags from sample.js
0
 

Author Comment

by:vkchaitu82
ID: 36486707
Thank you that resolved the issue.

before I close .. my last question:

Can you please let me know the syntex for case:
when I want to get some data from Form and validate?

I am looking for syntax for:

how can I give data to validate..and get that data assigned to a variable...
--
$(document).ready(function()  {
     
    alert($(document).validate());
});


Thanks again...:)
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36486715
you should make that field invoke that methoed

--
$(document).ready(function()  {
    alert($("$fieldId").validate());
});

and in sample.js

(function($){
    $.fn.validate = function() {
 
       var str = $(this).val();
       var re = new RegExp("^[0-9]{3}[\- ]?[0-9]{2}[\- ]?[0-9]{4}$", "g");
       var myArray = str.match(re);

       if ( myArray != null)
       {
          return true;
       }
       return false;
 };
})( jQuery );
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Basic understanding on "OO- Object Orientation" is needed for designing a logical solution to solve a problem. Basic OOAD is a prerequisite for a coder to ensure that they follow the basic design of OO. This would help developers to understand the b…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers learn about the “for” loop and how it works in Java. By comparing it to the while loop learned before, viewers can make the transition easily. You will learn about the formatting of the for loop as we write a program that prints even numbers…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
Suggested Courses
Course of the Month11 days, 16 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question