A jquery ui-based animation submission form and a jqueryui submission form

A jquery ui-based animation submission form and a jqueryui submission form

Today I want to share with you an animation submission form based on jquery ui. The effect of this form is to list the information required in sequence in the form of an animation. The results are very good, as shown below:

Download Online Preview source code

Implementation code.

Html code:

<div align="center">        <form id="myform">        <div id="bloc_recherche_couleur">            <div id="etape0_recherche" style="color: #ffffff;">                <br />                <div class="titre">                    WELCOME IN MY JUNGLE</div>                <br />                I want to know you, could you please say me more about you ?<br />                <br />                <div class="btn_noir etape_suivante" etape="0">                    Begin...</div>                <br />                <br />            </div>            <div id="etape1_recherche" class="div_cache" style="display: none; text-align: center;">                <br />                <div class="titre">                    Do you speak english ?</div>                <br />                <input type="text" name="" id="" value="" placeholder="Speak english ?" class="champtxt" /><br />                <br />                <div class="btn_noir etape_precedente" etape="1">                    PREVIOUS</div>                <div class="btn_noir etape_suivante" etape="1">                    NEXT</div>            </div>            <div id="etape2_recherche" class="div_cache" style="display: none; text-align: center;">                <br />                <div class="titre">                    Do you have a british accent ?</div>                <br />                <input type="text" name="" id="" value="" placeholder="British accent ?" class="champtxt" /><br />                <br />                <div class="btn_noir etape_precedente" etape="2">                    PREVIOUS</div>                <div class="btn_noir etape_suivante" etape="2">                    NEXT</div>            </div>            <div id="etape3_recherche" class="div_cache" style="display: none; text-align: center;">                <br />                <div class="titre">                    Do you like barbecues ?</div>                <br />                <input type="text" name="" id="" value="" placeholder="Bbq ?" class="champtxt" /><br />                <br />                <div class="btn_noir etape_precedente" etape="3">                    PREVIOUS</div>                <div class="btn_noir etape_suivante" etape="3">                    NEXT</div>            </div>            <div id="etape4_recherche" class="div_cache" style="display: none; color: #ffffff;">                <br />                <div class="titre">                    Thanks !                </div>                <br />                Now I know you...<br />                <br />                <div class="btn_noir etape_precedente" etape="4">                    PREVIOUS</div>                <div class="btn_noir" id="terminer">                    SAVE &amp; CLOSE</div>            </div>        </div>        <div id="btn_recherche" statut="ferme">            BEGIN THE QUIZ</div>        </form>    </div>

Css code:

  .titre        {            color: #ffffff;            font-size: 24px;        }                .btn_noir        {            font-size: 14px;            cursor: pointer;            padding: 8px;            border-radius: 2px;            background-color: #333333;            color: #ffffff;            display: inline-block;            margin: 8px;            font-weight: 500;            width: 100px;        }                .champtxt        {            width: 300px;            font-size: 16px;            padding: 5px;            margin: 0px;        }                .btn_noir:hover        {            background-color: #000000;        }                #bloc_recherche_couleur        {            background-color: #ffbe40;            width: 100%;            height: 200px;            display: none;        }                        #btn_recherche        {            background-color: #ffbe40;            width: 400px;            margin-bottom: 20px;            color: #ffffff;            font-weight: 500;            text-align: center;            padding: 10px;            border-radius: 0px 0px 3px 3px;            cursor: pointer;        }

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/10226

Jquery uses the link to submit a form

First, make sure that you have only one log id.
Then, confirm that your jquery click is written in $ (function () {here ....}) .
Finally, form submission can also be written as follows: document ['logform']. submit ();
 
[Jquery ui] how to use the jquery ui verification form?

// After obtaining the focus in the input box
$ ("# TxtMailAddr"). focus (function (){
$ ("# TxtMailAddrShow" pai.html ("Enter your email address. The email address cannot be blank ");
}). Blur (function () {// After the input box loses focus
Var nameVal = $ (this). val (); // gets the input value
Var trimNameVal = $. trim (nameVal); // remove spaces on both sides of the value
If (trimNameVal! = ""){
Var valid =/^ ([a-zA-Z0-9 _-]) + @ ([a-zA-Z0-9 _-]) + ((\. [a-zA-Z0-9 _-] {2, 3}) {1, 2}) $/; // mailbox Regular Expression
Var flag = valid. test (trimNameVal); // determine the email format
// Alert (flag );
If (flag ){
$ ("# TxtMailAddrShow" ).html ("correct email address ");
Flag5 = true;
} Else {
$ ("# TxtMailAddrShow" ).html ("Incorrect email format, please enter the correct email address ");
// $ (This). focus ();
}
// Alert (trimNameVal );
} Else {
$ ("# TxtMailAddrShow" ).html ("email cannot be blank ");
// $ (This). focus ();
}
});