basic form
Showing
app.js
0 → 100644
| var main=function(){ | ||
| $('#register').click(function(){ | ||
| console.log('click'); | ||
| $('.error').hide(); | ||
| var firstName=$('#firstName').val(); | ||
| var lastName=$('#lastName').val(); | ||
| var email=$('#email').val(); | ||
| var emailConfirm=$('#emailConfirm').val(); | ||
| var birthday=$('#birthday').val(); | ||
| var reg=true; | ||
| if(!(firstName)||!((/^[a-z\s]+$/i).test(firstName))){ | ||
| $('.error').show(); | ||
| $('#firstName').val('Error!'); | ||
| reg=false; | ||
| }; | ||
| if(!(lastName)||!((/^[a-z\s]+$/i).test(lastName))){ | ||
| $('.error').show(); | ||
| $('#lastName').val('Error!'); | ||
| reg=false; | ||
| }; | ||
| if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(email))){ | ||
| $('.error').show(); | ||
| $('#email').val('Error!'); | ||
| reg=false; | ||
| }; | ||
| if(!((/^[a-z][a-z0-9._]+@[a-z0-9]+\.[a-z0-9.]+[a-z]+$/i).test(emailConfirm))||email!=emailConfirm){ | ||
| $('.error').show(); | ||
| $('#emailConfirm').val('Error!'); | ||
| reg=false; | ||
| }; | ||
| if(!checkDate(birthday)){ | ||
| $('.error').show(); | ||
| $('#birthday').val('Error!'); | ||
| reg=false; | ||
| } | ||
| if (reg===true) { | ||
| confirm("Thank you for registing"); | ||
| } | ||
| }); | ||
| } | ||
| $(document).ready(main); | ||
|
||
| var checkDate=function(date){ | ||
| var regDate=/^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d+)$/; | ||
| var matchArray=date.match(regDate); | ||
| if (matchArray){ | ||
| if((matchArray[1]<1)||(matchArray[1]>31)){ | ||
| return false; | ||
| }; | ||
| if ((matchArray[3]<1)||(matchArray[3]>12)){ | ||
| return false; | ||
| }; | ||
| if (matchArray[5].length!=4){ | ||
| return false; | ||
| }; | ||
| return true; | ||
| }; | ||
| return false; | ||
| } | ||
form.html
0 → 100644
| <!Doctype html> | ||
| <html> | ||
| <head> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
| <script type="text/javascript" src="app.js"></script> | ||
| <link type="text/css" rel="stylesheet" href="stylesheet.css"> | ||
| <title>Register Form</title> | ||
| </head> | ||
| <body> | ||
| <div class="formDiv"> | ||
| <h1 style="text-align: center;" class="header1">Register Form</h1> | ||
|
||
| <table> | ||
| <tr style="height:20px"> | ||
| <td></td> | ||
| <td> | ||
| <p class="error">Input error</p> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td class="labelTd"><label for="firstName" class="registLabel" >First Name</label></td> | ||
| <td><input class="registInput" id="firstName" placeholder="First Name" /></td> | ||
|
||
| </tr> | ||
| <tr> | ||
| <td class="labelTd"><label for="lastName" class="registLabel" >Last Name</label></td> | ||
| <td><input class="registInput" id="lastName" placeholder="Last Name" /></td> | ||
| </tr> | ||
| <td class="labelTd"><label for="email" class="registLabel" >Email</label></td> | ||
| <td><input class="registInput" id="email" placeholder="Email" /></td> | ||
| <tr> | ||
| <td class="labelTd"><label for="emailConfirm" class="registLabel" >Email Confirmation</label></td> | ||
| <td><input class="registInput" id="emailConfirm" placeholder="Email Confirmation" /></td> | ||
| </tr> | ||
| <tr> | ||
| <td class="labelTd"><label for="birthday" class="registLabel" >Birthday</label></td> | ||
| <td><input class="registInput" id="birthday" placeholder="Birthday" /></td> | ||
| </tr> | ||
| <tr> | ||
| <td></td> | ||
| <td><button type="button" id="register">Register</button></td> | ||
|
||
| </tr> | ||
| </table> | ||
| </div> | ||
| </body> | ||
| </html> | ||
stylesheet.css
0 → 100644