Login and Register Page using @RemoteAction in salesforce

Apex Controller :
---------------------
public class SubmitFormController{
    public string FirstName {get;set;}
    public string LastName {get;set;}
    public string EmailAddress {get;set;}
    public string Password {get;set;}
    public string RePassword {get;set;}
    public string Supervisor {get;set;}
    public string SupervisorEmail {get;set;}
    public string ContactNo {get;set;}
    public string Client {get;set;}
    public string CareerLevel {get;set;}
    public string showAlertTest {get;set;}
    public boolean showRegisterWindow {get;set;}
    public string ErroMessage{get;set;}
    public SubmitFormController(){
        showAlertTest = '';
        showRegisterWindow = false;
        ErroMessage = '';
    }
    public pagereference submitForm(){
        try{
            system.debug(Apexpages.currentPage().getParameters().get('FirstName'));
            system.debug(Apexpages.currentPage().getParameters().get('LastName'));
            system.debug(Apexpages.currentPage().getParameters().get('EmailAddress'));
            system.debug(Apexpages.currentPage().getParameters().get('Password'));
            system.debug(Apexpages.currentPage().getParameters().get('RePassword'));
            system.debug(Apexpages.currentPage().getParameters().get('Supervisor'));
            system.debug(Apexpages.currentPage().getParameters().get('SupervisorEmail'));
            system.debug(Apexpages.currentPage().getParameters().get('ContactNo'));
            system.debug(Apexpages.currentPage().getParameters().get('Client'));
            system.debug(Apexpages.currentPage().getParameters().get('CareerLevel'));
            List<Resource_Detaills__c> rdList = new list<Resource_Detaills__c>();
            Resource_Detaills__c r = new Resource_Detaills__c();
            r.name = Apexpages.currentPage().getParameters().get('FirstName');
            r.Last_Name__c = Apexpages.currentPage().getParameters().get('LastName');
            r.Email_Address__c = Apexpages.currentPage().getParameters().get('EmailAddress');
            r.Password__c = Apexpages.currentPage().getParameters().get('Password');
            r.Re_Password__c = Apexpages.currentPage().getParameters().get('RePassword');
            r.Supervisor__c = Apexpages.currentPage().getParameters().get('Supervisor');
            r.Supervisor_Email__c = Apexpages.currentPage().getParameters().get('SupervisorEmail');
            r.Contact_No__c = Apexpages.currentPage().getParameters().get('ContactNo');
            //r.Client__c = Apexpages.currentPage().getParameters().get('Client');
            r.Career_Level__c = Apexpages.currentPage().getParameters().get('CareerLevel');
            rdList.add(r);
            if(!rdList.isEmpty()){
                    insert rdList;
                    showRegisterWindow = true;
                    ErroMessage ='';
                    //pagereference pref = new pagereference('/apex/ShiftRosterController_Pge');
                    //pref.getParameters().put('LoginPageId',rdList[0].id);
                    //return pref;
            }
        }catch(exception e){
            ErroMessage ='ERROR : Required Fieds Missing please enter all values';
            return null;
        }
        return null;  
    }
}

Visualforce Page :
----------------------

<apex:page controller="SubmitFormController" standardStylesheets="false" sidebar="false" showHeader="false" ><!--standardStylesheets="false" sidebar="false" showHeader="false" contentType="html-5.0" -->
    <style type="text/css">
     body { background: darkturquoise!important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
                margin-left: 200px!important;
     }
     .myActiveTab { background-color: #f1f1f1; color:black; background-image:none;padding: 13px!important;padding-left: 32px;font-family: serif;font-size: larger; }
     .myInactiveTab { background-color: #f1f1f1; color:black; background-image:none;padding: 13px!important;padding-left: 32px;font-family: serif;font-size: larger; }
     .whiteBG { background-color: white;text:black; }
    </style>
 
  <head>    
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
     <link href="//getbootstrap.com/examples/signin/signin.css" rel="stylesheet" media="screen"/>
   </head>
   <script type="text/javascript">
        function submitData() {
            var FirstName= document.getElementById('FirstName').value;
            //alert(FirstName);
            var LastName= document.getElementById('LastName').value;
            //alert(LastName);
            var EmailAddress= document.getElementById('EmailAddress').value;
            //alert(EmailAddress);
            var Password= document.getElementById('Password').value;
            //alert(Password);
            var RePassword= document.getElementById('RePassword').value;
            //alert(RePassword);
            var Supervisor= document.getElementById('Supervisor').value;
            //alert(Supervisor);
            var SupervisorEmail= document.getElementById('SupervisorEmail').value;
            //alert(SupervisorEmail);
            var ContactNo= document.getElementById('ContactNo').value;
            //alert(ContactNo);
            var CareerLevel = document.getElementById("CareerLevel").value;
            //alert(CareerLevel);
            if(FirstName==''){
                document.getElementById('FirstName').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(LastName==''){
                document.getElementById('LastName').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(EmailAddress==''){
                document.getElementById('EmailAddress').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(Password==''){
                document.getElementById('Password').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(RePassword==''){
                document.getElementById('RePassword').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(Supervisor==''){
                document.getElementById('Supervisor').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(SupervisorEmail==''){
                document.getElementById('SupervisorEmail').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(ContactNo==''){
                document.getElementById('ContactNo').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }if(CareerLevel==''){
                document.getElementById('CareerLevel').style.border =   'thin solid red';
                document.getElementById('required').innerHTML = 'Required Fields Missing Please fill out';
            }else{
                submitActionFunction(FirstName,LastName,EmailAddress,Password,RePassword,Supervisor,SupervisorEmail,ContactNo,CareerLevel);
            }
        }
    </script>
  <div class="container" >    
  <img src="{!$Resource.AccentureWhiteLogo}" class="img-responsive" style="margin-left: 170px;"/>

  <apex:form styleClass="form-horizontal" id="actionFun" style="margin-left: 200px!important;display: block;width: 50%;padding: 7px 12px;font-size: 14px;line-height: 1.428571;color: bisque;background-color: lavender;background-image: none;border: 2px solid #ccc;border-radius: 10px;">
      <center> <div style="color: black;font-size: initial;">Employee Login and Registration </div>
      <apex:outputLabel rendered="{!IF(AND(ErroMessage==''),false,true)}" style="color: red;" value="{!ErroMessage }"/></center><br/>
      <div style="top:-20px;position:relative;padding: 13px!important;padding-left: 32px;font-family: serif;font-size: larger;">        
      <apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel" style="" tabClass="myActiveTab" inactiveTabClass="myInactiveTab">
        <apex:tab label="Register" name="name1" id="tabOne" labelWidth="70px">
            <apex:outputPanel styleClass="whiteBG" rendered="{!NOT(showRegisterWindow)}">
            <apex:actionFunction name="submitActionFunction" action="{!submitForm}"  reRender="actionFun">          
            <apex:param name="FirstName" assignTo="{!FirstName}" value="" />        
            <apex:param name="LastName" assignTo="{!LastName}" value="" />
            <apex:param name="EmailAddress" assignTo="{!EmailAddress}" value="" />        
            <apex:param name="Password" assignTo="{!Password}" value="" />
            <apex:param name="RePassword" assignTo="{!RePassword}" value="" />        
            <apex:param name="Supervisor" assignTo="{!Supervisor}" value="" />
            <apex:param name="SupervisorEmail" assignTo="{!SupervisorEmail}" value="" />        
            <apex:param name="Client" assignTo="{!Client}" value="" />
            <apex:param name="ContactNo" assignTo="{!ContactNo}" value="" />
            <apex:param name="CareerLevel" assignTo="{!CareerLevel}" value="" />
        </apex:actionFunction>
    <div class="form-group">
      <div class="col-sm-10">
        <center><strong style="color: red" id="required"></strong></center><br/>
        <input type='text'  id='FirstName' placeholder="First Name" required="required" class="form-control" size="250" style="border-radius: 10px;"/>
      </div>
    </div>
 
    <div class="form-group">
      <div class="col-sm-10">
        <input type='text'  id='LastName' placeholder="Last Name" required="required" class="form-control" size="250" style="border-radius: 10px;"/>
      </div>
    </div>
 
    <div class="form-group">
      <div class="col-sm-10">
        <input type='email'  id='EmailAddress' placeholder="Email Address" required="required" class="form-control" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
        <input type='password'  id='Password' placeholder="Password" required="required" class="form-control" size="8" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
        <input type='password'  id='RePassword' placeholder="Re-Password" required="required" class="form-control" size="8" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
        <input type='text'  id='Supervisor' placeholder="Supervisor" required="required" class="form-control" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
        <input type='email'  id='SupervisorEmail' placeholder="Supervisor Email" required="required" class="form-control" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
        <input type='text'  id='ContactNo' placeholder="Contact No" required="required" class="form-control" size="10" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
         <select id="CareerLevel" class="form-control" style="border-radius: 10px;">
          <option value="" selected="selected" disabled="disabled">Career Level</option>
          <option>Level 12- Software Engineer Associate</option>
          <option>Level 11- Software Engineer Analyst</option>
          <option>Level 10- Senior Software Engineer</option>
          <option>Level 8- Associate Manager</option>
          <option>Level 9- Team Lead</option>
          <option>Level 7- Manager</option>
          <option>Level 6 and Above</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <input type="button"  value="Save&Register" onclick="submitData();" class="btn btn-default" style="border-radius: 10px;"/>      
      </div>
    </div>
    </apex:outputPanel>
    <apex:outputPanel rendered="{!showRegisterWindow}" style="color: green;font-size: small;">
        Registration has been succefully completed!!
    </apex:outputPanel>
        </apex:tab>
        <apex:tab label="Login" name="name2" id="tabTwo" labelWidth="70px">
            <div class="form-group">
      <div class="col-sm-10">
        <input type='email'  id='EmailAddress' placeholder="Email Address" required="required" class="form-control" style="border-radius: 10px;"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-10">
        <input type='password'  id='Password' placeholder="Password" required="required" class="form-control" size="8" style="border-radius: 10px;"/>
      </div>
    </div>
    <a href="/apex/Roster_PasswordForgot">Forgot Password ?</a>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <input type="button"  value="Login" class="btn btn-default" style="border-radius: 10px;"/>      
      </div>
    </div>
        </apex:tab>
        </apex:tabPanel>      
    </div>
  </apex:form>
</div>
</apex:page>

Screenshot :
--------------