Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

28 January 2011

Some Useful JavaScript Snippets


1. Close Window
< form>
< input onclick="javascript:window.close();" type="button" value="Close Window" />< /form>


2. Add to Favorites
< a href="javascript:window.external.AddFavorite('http://www.skills2earn.com', 'skills2earn')">Add to Favorites< /a>

3. To prevent your page being framed by someone else put this event handler into the body tag.
< body onLoad="if (self != top) top.location = self.location">

4. Pop up window
< HTML>
< HEAD>
< TITLE> A Window< /TITLE>
< SCRIPT>

function open_window(url) {
mywin = window.open(url,"win",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=520,height=350');
}

< /SCRIPT>
< /HEAD>

< BODY>

< A HREF = "javascript:open_window('page1.html')">
< IMG SRC ="image.gif">
< /A>

< A HREF = "javascript:open_window('page2.html')">
< IMG SRC ="image.gif">
< /A>

< /BODY>
< /HTML>

5. Determine if Browser Understands HTML5 Video
// Check if the browser understands the video element.
function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

6. Delayed Redirect
setTimeout( "window.location.href =
'http://walkerwines.com.au/'", 5*1000 );

7. Email Validation
< script language="JavaScript1.2">
var testresults
function checkemail(){
var str=document.validation.emailcheck.value
var filter=/^.+@.+\..{2,3}$/

if (filter.test(str))
testresults=true
else {
alert("Please input a valid email address!")
testresults=false
}
return (testresults)
}
< /script>
< script>
function checkbae(){
if (document.layers||document.all)
return checkemail()
else
return true
}
< /script>

8. Select All
< script language="Javascript">

function selectAll(theField) {
  var tempval=eval("document."+theField)
  tempval.focus()
  tempval.select()
}

< /script>

06 January 2011

How to validate forms using javascript

Forms are most commonly used HTML elemnts. Sometimes we need some fields of these forms to be mandatory. This can be done in php as well but the form will need to be submitted and the user will have to fill all the field again with the correct values, which is quite irritating. We can enhance the user experience by doing form validation using Javascript. For this purpose i wrote a very simple and easy to understand code. This is a sample code you can use it according to your need.
<!--Put this code in the head section of the page-->
<script type="text/javascript" language="javascript">
function validate_form()
{
 //For empty field validation
 if (document.getElementById('name').value=="")
 {
  alert ('Please enter a valid name.');
  document.getElementById('name').focus();
  return false;
 }
 //For Email address validation
 var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
 if (!filter.test(document.getElementById('email').value))
 {
  alert("Please input a valid email address!")
  document.getElementById('email').focus();
  return false;
 }
 //For empty field validation
 if (document.getElementById('phone').value=="")
 {
  alert ('Please enter a valid phone number.');
  document.getElementById('phone').focus();
  return false;
 }
 //For numeric field validation
 if (isNaN(document.getElementById('phone').value))
 {
  alert ('Please enter only numeric values.');
  document.getElementById('phone').focus();
  return false;
 }
}
</script>
<!--End of validation code-->
HTML Form
<form id="form1" name="form1" method="post" action="" onsubmit="return validate_form()">
  <table width="400" border="0" align="center" cellpadding="4" cellspacing="0">
    <tr>
      <td colspan="2"><strong>Validate Form:</strong></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td>Name:</td>
      <td><label>
        <input type="text" name="name" id="name" />
      </label></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><label>
        <input type="text" name="email" id="email" />
      </label></td>
    </tr>
    <tr>
      <td>Phone Number:</td>
      <td><label>
        <input type="text" name="phone" id="phone" />
      </label></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><label>
        <input type="submit" name="button" id="button" value="Submit" />
      </label></td>
    </tr>
  </table>
</form>
So that was some basic html form validation using javascript. If you guyz have any questions, please feel free to ask by commenting on this post.