Showing posts with label Forms. Show all posts
Showing posts with label Forms. Show all posts

Drop Down List of Countries

Posted by Blog Admin at Wednesday, October 10, 2012 . 10/10/12
0 comments
Labels: , ,

Drop Down List of Countries

Drop Down List of Countries


If you're looking for a country list with ISO codes for HTML dropdowns to quickly copy and paste into a website.

ISO List of Countries Dropdown HTML Downloads


Drop Down List of Countries


List of All Countries with ISO Codes



Drop Down List of Countries

Country dropdown HTML (ISO Codes as the value)





Drop Down List of Countries

Country dropdown HTML (Lowercase ISO Codes as the value)




Drop Down List of Countries

Country dropdown HTML (Country names as the value)




Drop Down List of Countries

Country dropdown HTML (Country names with underscores as the value)




Drop Down List of Countries

List of countries separated by a semicolon





List of the countries of the world for online form

Posted by Blog Admin at Monday, June 28, 2010 . 6/28/10
0 comments
Labels:

2 Letter Country Code

<select name="country">
<option value="" selected="selected">Country...</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AG">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua & Barbuda</option>
<option value="AR">Argentina</option>
<option value="AA">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BL">Bonaire</option>
<option value="BA">Bosnia & Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BC">British Indian Ocean Ter</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="IC">Canary Islands</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CD">Channel Islands</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CI">Christmas Island</option>
<option value="CS">Cocos Island</option>
<option value="CO">Columbia</option>
<option value="CC">Comoros</option>
<option value="CG">Congo</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CT">Cote D'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CB">Curacao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="TM">East Timor</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FA">Falkland Islands</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="FS">French Southern Ter</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GB">Great Britain</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HW">Hawaii</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IA">Iran</option>
<option value="IQ">Iraq</option>
<option value="IR">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="NK">Korea North</option>
<option value="KS">Korea South</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MY">Malaysia</option>
<option value="MW">Malawi</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="ME">Mayotte</option>
<option value="MX">Mexico</option>
<option value="MI">Midway Islands</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Nambia</option>
<option value="NU">Nauru</option>
<option value="NP">Nepal</option>
<option value="AN">Netherland Antilles</option>
<option value="NL">Netherlands</option>
<option value="NV">Nevis</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NW">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau Island</option>
<option value="PS">Palestine</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PO">Pitcairn Island</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="NT">St Barthelemy</option>
<option value="EU">St Eustatius</option>
<option value="HE">St Helena</option>
<option value="KN">St Kitts-Nevis</option>
<option value="LC">St Lucia</option>
<option value="MB">St Maarten</option>
<option value="PM">St Pierre & Miquelon</option>
<option value="VC">St Vincent & Grenadines</option>
<option value="SP">Saipan</option>
<option value="SO">Samoa</option>
<option value="AS">Samoa American</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome & Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="SC">Seychelles</option>
<option value="SS">Serbia & Montenegro</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="OI">Somalia</option>
<option value="ZA">South Africa</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TA">Tahiti</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad & Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TU">Turkmenistan</option>
<option value="TC">Turks & Caicos Is</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States of America</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VS">Vatican City State</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="VB">Virgin Islands (Brit)</option>
<option value="VA">Virgin Islands (USA)</option>
<option value="WK">Wake Island</option>
<option value="WF">Wallis & Futana Is</option>
<option value="YE">Yemen</option>
<option value="ZR">Zaire</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>


Full Country List

<select name="country">
<option value="" selected="selected">Country...</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bonaire">Bonaire</option>
<option value="Bosnia & Herzegovina">Bosnia & Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Ter">British Indian Ocean Ter</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Canary Islands">Canary Islands</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Channel Islands">Channel Islands</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Island">Cocos Island</option>
<option value="Columbia">Columbia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote DIvoire">Cote D'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curaco">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Ter">French Southern Ter</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Great Britain">Great Britain</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Hawaii">Hawaii</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea North">Korea North</option>
<option value="Korea Sout">Korea South</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Nambia">Nambia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherland Antilles">Netherland Antilles</option>
<option value="Netherlands">Netherlands</option>
<option value="Nevis">Nevis</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau Island">Palau Island</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Phillipines">Philippines</option>
<option value="Pitcairn Island">Pitcairn Island</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St Barthelemy">St Barthelemy</option>
<option value="St Eustatius">St Eustatius</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts-Nevis">St Kitts-Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Maarten">St Maarten</option>
<option value="St Pierre & Miquelon">St Pierre & Miquelon</option>
<option value="St Vincent & Grenadines">St Vincent & Grenadines</option>
<option value="Saipan">Saipan</option>
<option value="Samoa">Samoa</option>
<option value="Samoa American">Samoa American</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome & Principe">Sao Tome & Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Serbia & Montenegro">Serbia & Montenegro</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Tahiti">Tahiti</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad & Tobago">Trinidad & Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks & Caicos Is">Turks & Caicos Is</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Erimates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States of America">United States of America</option>
<option value="Uraguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City State">Vatican City State</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (Brit)">Virgin Islands (Brit)</option>
<option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
<option value="Wake Island">Wake Island</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>


View Example

Simple jQuery form Validation

Posted by Blog Admin at Monday, June 28, 2010 .
0 comments
Labels: ,

HTML


<ul class="form">
  <li id="username_li" class="validated">
                  <label for="r_username">Username:</label>
                  <div id="username_img"></div>
                  <input type="text" value="" maxlength="20" id="username" name="username" class="validated">
                  <div id="username_msg"></div>
          </li>
          <li id="password_li" class="validated">
                  <label for="r_password">Password:</label>
                  <div id="password_img"></div>
                  <input type="password" maxlength="20" id="password" name="password">
                  <div id="password_msg"></div>
          </li>
          <li id="password_copy_li" class="">
                  your password is <input id="password_copy">
          </li>
          <li id="confirmpass_li" class="">
                  <label for="r_confirmpass">Confirm Password:</label>
                  <div id="confirmpass_img"></div>
                  <input type="password" maxlength="20" id="confirmpass" name="r_confirmpass">
                  <div id="confirmpass_msg"></div>
          </li>
          <li id="dob_li" class="validated">
                  <label for="dob">date of birth:</label>
                  <div id="dob_img"></div>
                  <input type="dob" maxlength="20" id="dob" name="dob">
                  <div id="dob_msg"></div>
          </li>
          <li id="email_li" class="validated">
                  <label for="email">email:</label>
                  <div id="email_img"></div>
                  <input type="email" maxlength="20" id="email" name="email">
                  <div id="email_msg"></div>
          </li>
    </ul>


CSS

label {display:block;margin:2px;}
.form {padding:0px;margin:0px;background-color:#EDECDC;}
.form li {width:190px;margin:3px;padding:5px 5px 5px 30px;list-style:none;position:relative;}
*html .form li {left:-15px;}
.form li img {position:absolute;left:5px;}
.form .error {border:1px solid #A90000;padding:4px 4px 4px 29px;background-color:#F8E5E5;}
.form .success {border:1px solid #74F019;padding:4px 4px 4px 29px;background-color:#DEF8CA;}
.form .selected {border:1px solid #1AA8E1;padding:4px 4px 4px 29px;background-color:#8DD8F7;}
#login_table .pad {padding:15px;}
.form input.login {padding:2px 7px;width:auto;}
.form input {width:180px;}


Javascript

$.fn.copyTo = function(to) {

    var to = $(to);

    for ( var i = 1; i < arguments.length; i++ )

    to.set( arguments[i], this.get(0)[ arguments[i] ] );

    return this;

    };
  new function() {

    // $.fn.validate = validate() {};

    $.fn.validate = {

    init: function(o) {

    if(o.name == 'username') { this.username(o) };

    if(o.name == 'password') { this.password(o) };

    if(o.name == 'email') { this.email(o) };

    if(o.name == 'dob') { this.dob(o) };

    },

    username: function(o) {

    var user = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;

    if (!o.value.match(user)) {

    doValidate(o);

    } else {

    doError(o,'no special characters allowed');

    };

    },

    password: function(o) {

    var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;

    if (!o.value.match(pass)) {

    doValidate(o);

    } else {

    doError(o,'no special characters allowed');

    };

    },

    email: function(o) {

    var email  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (o.value.match(email)) {

    doSuccess(o);

    } else {

    doError(o,'not a valid email');

    };

    },

    dob: function(o) {

    var dob  = /(0[1-9]|1[012])+\/(0[1-9]|[12][0-9]|3[01])+\/(19|20)\d\d/;

    if (o.value.match(dob)) {

    doSuccess(o);

    } else {

    doError(o,'not a valid date');

    };

    }

    };
   function doSuccess(o) {

    $('#' + o.id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/accept.gif" border="0" style="float:left;" />');

    $('#' + o.id + '_li').removeClass("error");

    $('#' + o.id + '_msg').html("");

    $('#' + o.id + '_li').addClass("success");

    }
   function doError(o,m) {

    $('#' + o.id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/exclamation.gif" border="0" style="float:left;" />');

    $('#' + o.id + '_li').addClass("error");

    $('#' + o.id + '_msg').html(m);

    $('#' + o.id + '_li').removeClass("success");

    }

    //private helper, validates each type after check

    function doValidate(o) {

    $('#' + o.id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/loading.gif" border="0" style="float:left;" />');

    $.post('ajax.php', { id: o.id, value: o.value }, function(json) {

    eval("var args = " + json);

    if (args.success == true)

    {

    doSuccess(args);

    }

    else

    {

    doError(args,args.msg);

    }

    });

    };
  };

    $.fn.match = function(m) {

    $('#' + this.get(0).id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/loading.gif" border="0" style="float:left;" />');

    if ($(this).get(0).val() == $(m.match).val()) {

    $('#' + this.get(0).id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/accept.gif" border="0" style="float:left;" />');

    $(m.error).removeClass("error");

    $(m.error).addClass("success");

    $('#' + this.get(0).id + '_msg').html("");

    } else {

    $('#' + this.get(0).id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/exclamation.gif" border="0" style="float:left;" />');

    $(m.error).addClass("error");

    $(m.error).removeClass("success");

    $('#' + this.get(0).id + '_msg').html("The passwords don't match, please try again");

    };

    };

    $(document).ready(function()

    {
   $("//[@class=validated]/input").blur(function() {

    $(this).validate.init(this);

    });

  
   $("#confirmpass").blur(function() {

    $(this).match({match: '#password', error: '#confirmpass_li'});

    });

  
   $("#password").keyup(function() {

    $(this).copyTo("#password_copy","value");

    });
   // This Used To Be HOVER, But I.E. Didnt Like It

    //$(".form li").hover(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});

    $(".form li").mouseover(function() {

    $(this).addClass("selected");

    });

    $(".form li").mouseout(function() {

    $(this).removeClass("selected");

    });

    });


View Example


Using Tooltips in Form Fields

Posted by Blog Admin at Friday, June 25, 2010 . 6/25/10
0 comments
Labels: , ,


Here you can see a tooltip when you put your focus on any of the following form fields. You can move between fields with your keyboard (using the TAB key) or with your mouse.

HTML

    <form id="myform" action="#">

     <h3>Registration Form</h3>

     <div id="inputs">

     <!-- username -->

  <label for="username">Username</label>

  <input id="username" title="Must be at least 8 characters."/><br />

     <!-- password -->

  <label for="password">Password</label>

  <input id="password" type="password" title="Try to make it hard to guess." /><br />

     <!-- email -->

  <label for="email">Email</label>

  <input id="email" title="We won't send you any marketing material." /><br />

     <!-- message -->

  <label for="body">Message</label>

  <textarea id="body" title="What's on your mind?"></textarea><br />

     <!-- message -->

  <label for="where">Select one</label>

  <select id="where" title="Select one of these options">

  <option>-- first option --</option>

  <option>-- second option --</option>

  <option>-- third option --</option>

  </select>

  <br />

  </div>

     <!-- email -->

  <label>

      I accept the terms and conditions

  <input type="checkbox" id="check" title="Required to proceed" />

  </label>

     <p>

  <button type="button" title="This button won't do anything">Proceed</button>

  </p>

    </form>

CSS

.tooltip {
 background-color:#000;
 border:1px solid #fff;
 padding:10px 15px;
 width:200px;   
 display:none;
 color:#fff;
 text-align:left;
 font-size:12px;

/* outline radius for mozilla/firefox only */
  -moz-box-shadow:0 0 10px #000;
 -webkit-box-shadow:0 0 10px #000;
}

Javascript

// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({

 // place tooltip on the right edge
 position: "center right",

 // a little tweaking of the position
 offset: [-2, 10],

 // use the built-in fadeIn/fadeOut effect
 effect: "fade",

 // custom opacity setting
 opacity: 0.7

});

View Example

Custom Input Types and Attributes

Posted by Blog Admin at Thursday, June 24, 2010 . 6/24/10
0 comments
Labels: ,

Here we make a custom time input with custom minlength and data-equals  attributes. New wave form development. jQuery Tools Validator makes it easy. 




<form id="myform" class="cols">
 
 <h3>HTML5 form with custom inputs</h3>

 <fieldset>
  <label> email * <input type="email" required="required" minlength="9" /> </label> 
  <label> username * <input type="text" name="username" minlength="5" /> </label> 
  <label> Password <input type="password" name="password" minlength="4" /> </label> 
  <label> Password check <input type="password" name="check" data-equals="password" /> </label>
 </fieldset> 
 
 <fieldset>
  <label> website * <input type="url" required="required" /> </label> 
  <label> name * <input type="text" name="name" required="required" maxlength="30" /> </label>  
  <label> age <input type="number" name="age" size="4" maxlength="3" /> </label> 
  <label> time <input type="time" name="time" maxlength="8" /> </label>
 </fieldset>

 <div class="clear"></div>
 
 <button type="submit">Submit form</button>
 
</form>





time input type

// Regular Expression to test whether the value is valid
$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) { 
 return /^\d\d:\d\d$/.test(value);
});





data-equals attribute

$.tools.validator.fn("[data-equals]", "Value not equal with the $1 field", function(input) {
 var name = input.attr("data-equals"),
  field = this.getInputs().filter("[name=" + name + "]"); 
 return input.val() == field.val() ? true : [name]; 
});

minlength attribute




$.tools.validator.fn("[minlength]", function(input, value) {
 var min = input.attr("minlength");
 
 return value.length >= min ? true : {     
  en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""),
  fi: "Kentän minimipituus on " +min+ " merkkiä" 
 };
});






View Example

jQuery Scrollable Registration Wizard

Posted by Blog Admin at Wednesday, June 16, 2010 . 6/16/10
1 comments
Labels: , , , ,

Here is a registration wizard with primitive input validation logic and a "twitter" style message box for validation errors:

jQuery scrollable registration wizard


HTML


<div id="wizard">
 <ul id="status">
  <li class="active"><strong>1.</strong> Create Account</li>
  <li><strong>2.</strong> Contact Information</li>
  <li><strong>3.</strong> Finalize</li>
  </ul>
 <div class="items">
 <!-- page1 -->
  <div class="page">
 <h2>
  <strong>Step 1: </strong> jQuery Tools Account
  <em>Please enter your login information:</em>
  </h2>
 <ul>
  <!-- email -->
  <li class="required">
  <label>
  <strong>1.</strong> Enter Your Email Address <span>*</span><br>
  <input type="text" name="email" class="text">
  <em>Your password will be sent to this address. Your address will not made public.</em>
  </label>
  </li>
 <!-- username -->
  <li>
  <label>
  <strong>2.</strong> Pick a username <br>
  <input type="text" name="username" class="text">
  <em>Your preferred username to be used when logging in.</em>
  </label>
  </li>
 <!-- password -->
  <li class="required double">
 <label>
  <strong>3.</strong> Choose a Password <span>*</span><br>
  <input type="password" name="password" class="text">
  <em>Must be at least 8 characters long.</em>
  </label>
 <label>
  Verify Password <span>*</span><br>
  <input type="password" name="password1" class="text">
  </label>
  </li>
 <li class="clearfix">
  <button class="next right" type="button">Proceed »</button>
  </li>
  </ul>
 </div>
 <!-- page2 -->
  <div class="page">
 <h2>
  <strong>Step 2: </strong> Contact Information <b></b>
  <em>Please tell us where you live:</em>
  </h2>
 <ul>
  <!-- address -->
  <li class="required">
  <label>
  <strong>1.</strong> Enter Your Street Address <span>*</span><br>
  <input type="text" name="email" class="text">
  <em><strong>Example</strong>: Random Street 69 A 666</em>
  </label>
  </li>
 <!-- zip / city -->
  <li class="required double">
 <label>
  <strong>2.</strong> Enter Your Zip Code <span>*</span><br>
  <input name="zip" class="text">
  <em>This must be a numeric value</em>
  </label>
 <label>
  <strong>3.</strong> and The City <span>*</span>
  <select name="city">
  <option value="">-- please select --</option>
  <option>Helsinki</option>
  <option>Berlin</option>
  <option>New York</option>
  </select>
  </label>
  </li>
 <li class="clearfix">
  <button style="float: left;" class="prev disabled" type="button">« Back</button>
  <button class="next right" type="button">Proceed »</button>
  </li>
 <br clear="all">
  </ul>
 </div>
 <!-- page3 -->
  <div class="page">
 <h2>
  <strong>Step 3: </strong> Congratulations! <b></b>
  <em>You are now a happy member of the Open Source community</em>
  </h2>

 
 <p style="margin-top: 30px;">
  <button class="prev disabled" type="button">« Back</button>
  </p>
 </div>

 </div>
 </div>



CSS

/* scrollable root element */
#wizard {	
	background:#fff url(../images/h600.png) repeat scroll 0 0;
	border:5px solid #789;
	font-size:12px;
	height:450px;
	width:570px;
	overflow:hidden;
	position:relative;
	
	/* rounded corners for modern browsers */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}  

/* scrollable items */
#wizard .items {
	width:20000em;	
	clear:both;	
	position:absolute;	
}

/* single item */
#wizard .page {	
	padding:20px 30px;
	width:500px;
	float:left;	
}

/* title */
#wizard h2 {
	border-bottom:1px dotted #ccc;
	font-size:22px;
	font-weight:normal;
	margin:10px 0 0 0;
	padding-bottom:15px;		
}

#wizard h2 em {
	display:block;
	font-size:14px;
	color:#666;
	font-style:normal;
	margin-top:5px;
}

/* input fields */
#wizard ul {
	padding:0px !important;
	margin:0px !important;
}

#wizard li {
	list-style-type:none;
	list-style-image:none;
	margin-bottom:25px;	
}

#wizard label {
	font-size:16px;	
	display:block;
}

#wizard label strong {
	color:#789;	
	position:relative;
	top:-1px;
}

#wizard label em {
	font-size:11px;
	color:#666;	
	font-style:normal;
}

#wizard .text {
	width:100%;
	padding:5px;
	border:1px solid #ccc;
	color:#456;
	letter-spacing:1px;
}

#wizard select {
	border:1px solid #ccc;
	width:94%;	
	padding:4px;
}

#wizard label span {
	color:#b8128f;
	font-weight:bold;
	position:relative;
	top:4px;
	font-size:20px;
}

#wizard .double label { 
	width:50%;
	float:left;
}

#wizard .double .text {
	width:93%;	
}

#wizard .clearfix {
	clear:left;
	padding-top:10px;	
}

#wizard .right {
	float:right;		
}

/* validation error message bar */
#drawer {
	background:#fff url(../images/h80.png) repeat-x scroll 0 0;
	_background-color:#fff;
	overflow:visible;
	position:fixed;	
	left:0;
	top:0;
	text-align:center;
	padding:15px;
	font-size:18px;
	border-bottom:2px solid #789;
	width:100%;
	display:none;
	z-index:2;
}

#wizard .error {
	border:1px solid red;		
}

#wizard #status {
	margin:0px !important;
	height:35px;
	background:#123 url(../images/h30.png) repeat-x;
	padding-left:25px !important;
	_background:#123;
}

#status li {
	list-style-type:none;
	list-style-image:none;
	float:left;
	color:#fff;
	padding:10px 30px;
}

#status li.active {
	background-color:#b8128f;
	font-weight:normal;		
}




JavaScript


function formatText(index, panel) {
		  return index + "";
	    }
    
        $(function () {
        
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 3000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        		startText: "Go",             // Start text
		        stopText: "Stop",               // Stop text
		        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
            
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
            
        });



jquery.tools.min.js


Click to Download



scrollable-registration-wizard.js


Click to Download




Example


Click to DEMO