Week 2 : My Homestay Validate Admin Page JQuery
- Create admin table.
- Generate login page for administration page
- Generate admin page and edit profile page with JQuery
- Add one attribute at admin table to track when the last is updated.
- Create the login page with validation. The error message should show with red color.
- Add on Admin_Image at admin table and while upload the image it will directly save into folder not database.
sample using JQuery validation
<pre style="background:#0c1021;color:#f8f8f8"><span style="color:#aeaeae">//validate functions</span>
<span style="color:#fbde2d">function</span> <span style="color:#ff6400">validateName</span>()
{
<span style="color:#aeaeae">//if it's NOT valid</span>
<span style="color:#fbde2d">if</span>(admin_name<span style="color:#8da6ce">.val</span>()<span style="color:#8da6ce">.length</span> <span style="color:#fbde2d"><</span> <span style="color:#d8fa3c">4</span>)
{
admin_name<span style="color:#8da6ce">.addClass</span>(<span style="color:#61ce3c">"boxred"</span>);
nameInfo<span style="color:#8da6ce">.html</span>(<span style="color:#61ce3c">"<div class='alert alert-warning span4'>"</span><span style="color:#fbde2d">+</span>
<span style="color:#61ce3c">"<strong>Wrong!</strong> The names must with more than 3 letters!"</span><span style="color:#fbde2d">+</span>
<span style="color:#61ce3c">"</div>"</span>);
<span style="color:#8da6ce">$</span>('<span style="color:#ff6400">#update_name</span>')<span style="color:#8da6ce">.attr</span>(<span style="color:#61ce3c">"disabled"</span>, <span style="color:#d8fa3c">true</span>);
<span style="color:#8da6ce">$</span>('<span style="color:#ff6400">#update_name</span>')<span style="color:#8da6ce">.fadeTo</span>(<span style="color:#d8fa3c">10</span>,<span style="color:#d8fa3c">0.5</span>);
}
<span style="color:#aeaeae">//if it's valid</span>
<span style="color:#fbde2d">else</span>
{
admin_name<span style="color:#8da6ce">.removeClass</span>(<span style="color:#61ce3c">"boxred"</span>);
nameInfo<span style="color:#8da6ce">.html</span>(<span style="color:#61ce3c">"<div class='alert alert-success span4'>"</span><span style="color:#fbde2d">+</span>
<span style="color:#61ce3c">"<strong>Correct!</strong> Now can click the save button"</span><span style="color:#fbde2d">+</span>
<span style="color:#61ce3c">"</div>"</span>);
<span style="color:#8da6ce">$</span>('<span style="color:#ff6400">#update_name</span>')<span style="color:#8da6ce">.removeAttr</span>(<span style="color:#61ce3c">"disabled"</span>);
<span style="color:#8da6ce">$</span>('<span style="color:#ff6400">#update_name</span>')<span style="color:#8da6ce">.fadeTo</span>(<span style="color:#d8fa3c">10</span>,<span style="color:#d8fa3c">1.0</span>);
}
}
</pre>
0 comments