c# - MVC Remote Controller action is only called on form submit -

to understanding, thought remote validation calls controller action user leaves textbox. trying validate username (email) controller action called when submit form (when click submit button). want called leave email textbox. doing wrong here ?

viewmodel

public class registerviewmodel {     [required(errormessage = "email required")]     [datatype(datatype.emailaddress)]     [remote("isemailavailable","register", errormessage = "email registered, use forgot password reset password if case.")]     [display(name = "email")]     public string username { get; set; }      [required(errormessage = "first name required")]     [display(name = "first name")]     public string firstname { get; set; }      [required(errormessage = "lastname required")]     [display(name = "last name")]     public string lastname { get; set; }      [datatype(datatype.password)]     [required(errormessage = "password required")]     [display(name = "password")]     public string password { get; set; }      [datatype(datatype.password)]     [required(errormessage = "password required")]     [system.componentmodel.dataannotations.compare("password", errormessage = "passwords not match")]     [display(name = "confirm password")]     public string confirmpassword { get; set; }      [required(errormessage = "business name required")]     [display(name = "business name")]     public string businessname { get; set; }      [required(errormessage = "address line 1 required")]     [display(name = "address line 1")]     public string addressline1 { get; set; }      [display(name = "address line 2")]     public string addressline2 { get; set; }      [required(errormessage = "postcode required")]     [display(name = "postcode")]     public string postcode { get; set; }      [required(errormessage = "city required")]     [display(name = "city")]     public string city { get; set; }      [required(errormessage = "country required")]     [display(name = "country")]     public string country { get; set; }      [required(errormessage = "telephone number required")]     [display(name = "telephone number")]     public string telephonenumber { get; set; }      public bool emailverified { get; set; }      public bool telephonenumberverified { get; set; }  } 

controller action

    [httpget]     public jsonresult isemailavailable(string username)     {         return json(false, jsonrequestbehavior.allowget);     } 

view

@using (html.beginform("register", "register", formmethod.post, new { id = "frmregister", @class = "frmregister" })) {     @html.antiforgerytoken()     <h2>register</h2>     @html.validationsummary(false, "some informations have provided not correct", new {@class = "alert alert-danger"})     <div class="form-group">         @html.labelfor(m => m.firstname)         @html.textboxfor(m => m.firstname, null, new {id = "txtfirstname", @class = "form-control", placeholder = "first name"})     </div>     <div class="form-group">         @html.labelfor(m => m.lastname)         @html.textboxfor(m => m.lastname, null, new {id = "txtlastname", @class = "form-control", placeholder = "last name"})     </div>     <div class="form-group">         @html.labelfor(m => m.username)         @html.textboxfor(m => m.username, null, new {id = "txtemail", @class = "form-control", placeholder = "email", type="email"})         @html.validationmessagefor(m => m.username)      </div>     <div class="form-group">         @html.labelfor(m => m.password)         @html.textboxfor(m => m.password, null, new {id = "txtpassword", @class = "form-control", placeholder = "password", type="password"})     </div>     <div class="form-group">         @html.labelfor(m => m.confirmpassword)         @html.textboxfor(m => m.confirmpassword, null, new {id = "txtconfirmpassword", @class = "form-control", placeholder = "password", type = "password"})     </div>     <div class="form-group">         @html.labelfor(m => m.businessname)         @html.textboxfor(m => m.businessname, null, new { id = "txtbusinessname", @class = "form-control", placeholder = "business name" })     </div>     <div class="form-group">         @html.labelfor(m => m.addressline1)         @html.textboxfor(m => m.addressline1, null, new {id = "txtaddressline1", @class = "form-control", placeholder = "address line 1"})     </div>     <div class="form-group">         @html.labelfor(m => m.addressline2)         @html.textboxfor(m => m.addressline2, null, new {id = "txtaddressline1", @class = "form-control", placeholder = "address line 2" })     </div>     <div class="form-group">         @html.labelfor(m => m.postcode)         @html.textboxfor(m => m.postcode, null, new {id = "txtpostcode", @class = "form-control", placeholder = "postcode"})     </div>     <div class="form-group">         @html.labelfor(m => m.city)         @html.textboxfor(m => m.city, null, new {id = "txtcity", @class = "form-control", placeholder = "city"})     </div>     <div class="form-group">         @html.labelfor(m => m.country)         @html.textboxfor(m => m.country, null, new {id = "txtcountry", @class = "form-control", placeholder = "country"})     </div>     <div class="form-group">         @html.labelfor(m => m.telephonenumber)         @html.textboxfor(m => m.telephonenumber, null, new {id = "txttelephonenumber", @class = "form-control", placeholder = "telephone number"})     </div>     <button type="submit" class="btn btn-success btnregister">register</button>     }      @scripts.render("~/bundles/jquery")     @scripts.render("~/bundles/bootstrap")     @scripts.render("~/bundles/jqueryval")     @styles.render("~/content/css")