2012-06-05 2 views
6

Я пытаюсь понять, как я могу превратить это:Использование пульта функцию проверки JQuery

$('#username').blur(function(){ 
    $.post('register/isUsernameAvailable', 
      {"username":$('#username').val()}, 
      function(data){ 
       if(data.username == "found"){ 
        alert('username already in use'); 
       } 
      }, 'json'); 
}); 

в нечто близкое к этому:

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: { 
       url: 'register/isUsernameAvailable', 
       type: 'post', 
       data: { 
        'username': $('#username').val() 
       } 

      } 
     } 

Однако я с трудом время заканчивая. То, что я хочу, вместо предупреждения, чтобы оно отображало сообщение об ошибке, но я могу установить сообщение внутри фактических сообщений проверки jquery.

http://docs.jquery.com/Plugins/Validation/Methods/remote#options

UPDATE:

По какой-то причине его не делает его как POST его делает это как запрос GET и не знаю, почему. Вот обновленный код:

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: { 
       url: 'register/isUsernameAvailable', 
       dataType: 'post', 
       data: { 
        'username': $('#username').val() 
       }, 
       success: function(data) { 
        if (data.username == 'found') 
        { 
         message: { 
          username: 'The username is already in use!' 
         } 
        } 
       } 

      } 
     }, 

UPDATE 2:

Теперь я получаю где-то я вернулся, чтобы получить запрос POST. У меня возникают еще две проблемы. Одним из них является тот факт, что для выполнения другого запроса POST пользователь должен обновить форму. И последняя проблема заключается в том, что если возвращенное имя пользователя найдено, оно НЕ отображает сообщение об ошибке.

rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: { 
       type: 'post', 
       url: 'register/isUsernameAvailable', 
       data: { 
        'username': $('#username').val() 
       }, 
       dataType: 'json', 
       success: function(data) { 
        if (data.username == 'found') 
        { 
         message: { 
          username: 'The username is already in use!' 
         } 
        } 
       } 

      } 
     }, 

ОБНОВЛЕНИЕ:

public function isUsernameAvailable() 
{ 
    if ($this->usersmodel->isUsernameAvailable($this->input->post('username'))) 
    { 
     return false; 
    } 
    else 
    { 
     return true; 
    }   
} 

ОБНОВЛЕНИЕ 4:

Контроллер:

public function isUsernameAvailable() 
{ 
    if ($this->usersmodel->isUsernameAvailable($this->input->post('username'))) 
    { 
     return false; 
    } 
    else 
    { 
     return true; 
    }   
} 

public function isEmailAvailable() 
{ 
    if ($this->usersmodel->isEmailAvailable($this->input->post('emailAddress'))) 
    { 
     return false; 
    } 
    else 
    { 
     return true; 
    }   
} 

МОДЕЛЬ:

/** 
* Check if username available for registering 
* 
* @param string 
* @return bool 
*/ 
function isUsernameAvailable($username) 
{ 
    $this->db->select('username'); 
    $this->db->where('LOWER(username)=', strtolower($username)); 
    $query = $this->db->get($this->usersTable); 
    if ($query->num_rows() == 0) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
} 

/** 
* Check if email available for registering 
* 
* @param string 
* @return bool 
*/ 
function isEmailAvailable($email) 
{ 
    $this->db->select('email'); 
    $this->db->where('LOWER(email)=', strtolower($email)); 
    $query = $this->db->get($this->usersTable); 
    if($query->num_rows() == 0) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
} 
+0

Я включил ссылку на удаленной функции. –

+0

Можете ли вы изменить код на стороне сервера? –

+0

Зачем мне это нужно. Я работаю с js side. –

ответ

1

Ну, я не знаю, что вы думаете о плагине, но я думаю, вы хотите, чтобы это проверило, чтобы увидеть этот плагин, если имя пользователя больше 6 или меньше 12. Какой из вашего основного примера с jQuery без плагина быть таким же простым, как добавление к концепции одного маленького if-else.

$('#username').blur(function(){ 
    if($('#username').val().length < 6 || $('#username').val().length > 12) 
    { 
     alert('Username must be between 6 and 12 characters'); 
    } 
    else 
    { 
     $.post('register/isUsernameAvailable', 
       {"username":$('#username').val()}, 
       function(data){ 
        if(data.username == "found"){ 
         alert('username already in use'); 
        } 
       }, 'json'); 
    } 
}); 
+1

Возможно, правильно, но не отвечает на вопрос – anthonygore

16

Самый простой способ сделать это, чтобы просто вернуть true, сообщение об ошибке в виде строки или false с вашего сервера на стороне ресурса. Согласно jQuery validate documentation for remote:

Ответ оценивается как JSON и должно быть верно для действительных элементов, и может быть любым ложным, неопределенным или нулевым недействительных элементов, используя сообщение по умолчанию; или строки, например. «Это имя уже принято, попробуйте peter123 вместо этого» для отображения в качестве сообщения об ошибке.

Это означает, что если вы можете изменить свой код на стороне сервера для возврата true в случае успешной проверки или сообщение об ошибке («имя пользователя уже используется») в случае неудачной проверки, вы можете просто написать следуя правилу: дистанционного

remote: { 
    type: 'post', 
    url: 'register/isUsernameAvailable', 
    data: { 
     'username': function() { return $('#username').val(); } 
    }, 
    dataType: 'json' 
} 

Вы также можете просто вернуть true или false с вашего сервера на стороне ресурса и определить сообщение об ошибке на клиенте. В этом случае вы бы вышеуказанное правило, а затем свойство в messages объекта:

messages: { 
    username: { 
     remote: "username already in use" 
    } 
} 
+0

У меня есть обе части, как и вы, однако, проверьте мой код на стороне сервера выше, по какой-то причине он не отображает сообщение, в котором отображается css ошибки, Избегайте ошибки. –

+0

Что происходит, когда вы возвращаете строку в ложном случае? Отображается ли оно тогда? –

+0

отправляет сообщение, которое находится в js, а НЕ - текстовую строку, которую я положил в ложный случай. –

5

Я знаю, что это слишком поздно, но это может помочь другим людям.

Удаленный метод предназначен, чтобы получать строку JSON, так что ваша сторона сервера должна быть возвращение что-то вроде этого к методу ...

echo(json_encode(true)); // if there's nothing matching 
echo(json_encode(false)); 

Это пример кода JS, что я написал, пытаясь проверить псевдоним пользователя.

$(document).ready(function(){ 
      $('#form').validate({ 
      rules: { 
       user_nickname: { 
        remote: { 
         url: "available.php", 
         type: "post", 
         data: { 
          user_nickname: function() { 
          return $("#user_nickname").val(); 
          } 
         } 
         }    
       } 
      }, 
      messages:{ 
       user_nickname: { 
        remote: "Username already taken" 
       } 
      } 
     });}); 

Надеюсь, это поможет кому-то, это мне помогло.

+0

спасибо за json encode – mokNathal

0

Недавно мне нужно было выполнить удаленную проверку в проекте рельсов и попытался отправить правильный ответ со стороны сервера, если вход недействителен. В конце концов, решение было довольно простым.

Если проверка на стороне сервера возвращает значение true, вы можете отправить true или «true», иначе вы можете вернуть любую строку, например «Письмо уже существует» или «Электронная почта не имеет действительных записей MX». Эта строка будет отображаться как сообщение проверки в форме. Единственный улов в том, что строка сообщения, возвращаемая с серверной стороны, должна быть действительной JSON и должна быть в этом формате - [«Письмо уже существует»].

Некоторое объяснение того, как я отлаживал и нашел решение: См. Ниже удаленный метод в jquery.validate.js. Я добавил логические операторы и функцию ошибки для вызова ajax для отладки. Когда я вернул нормальную строку со стороны сервера, была вызвана ошибка jQuery.parseJson.

// http://jqueryvalidation.org/remote-method/ 

remote: function(value, element, param) { 
    if (this.optional(element)) { 
     return "dependency-mismatch"; 
    } 

    var previous = this.previousValue(element), 
     validator, data; 

    if (!this.settings.messages[ element.name ]) { 
     this.settings.messages[ element.name ] = {}; 
    } 
    previous.originalMessage = this.settings.messages[ element.name ].remote; 
    this.settings.messages[ element.name ].remote = previous.message; 

    param = typeof param === "string" && { url: param } || param; 

    if (previous.old === value) { 
     return previous.valid; 
    } 

    previous.old = value; 
    validator = this; 
    this.startRequest(element); 
    data = {}; 
    data[ element.name ] = value; 

    $.ajax($.extend(true, { 
     url: param, 
     mode: "abort", 
     port: "validate" + element.name, 
     dataType: "json", 
     data: data, 
     context: validator.currentForm, 
     success: function(response) { 
      console.log("response is "+response); 
      var valid = response === true || response === "true", 
       errors, message, submitted; 
      console.log("valid is "+valid); 
      validator.settings.messages[ element.name ].remote = previous.originalMessage; 
      if (valid) { 
       submitted = validator.formSubmitted; 
       validator.prepareElement(element); 
       validator.formSubmitted = submitted; 
       validator.successList.push(element); 
       delete validator.invalid[ element.name ]; 
       validator.showErrors(); 
      } else { 
       errors = {}; 
       message = response || validator.defaultMessage(element, "remote"); 
       console.log("else message is "+message); 
       errors[ element.name ] = previous.message = $.isFunction(message) ? message(value) : message; 
       validator.invalid[ element.name ] = true; 
       console.log("else errors[ element.name ] "+errors[ element.name ]); 
       validator.showErrors(errors); 
      } 
      previous.valid = valid; 
      validator.stopRequest(element, valid); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.log(xhr.status); 
      console.log(thrownError); 
     } 
    }, param)); 
    return "pending"; 
} 
+1

Я думаю, что это попытка ответить, но, пожалуйста, проясните свою формулировку, потому что, поскольку она стоит, она читается как вопрос вместо этого - ответ похоронен в вашем потоке сознания. – Ajean

+0

Принятый ответ просто не ответьте, что серверная сторона должна вернуть, и там есть комментарий, который говорит, что он не отвечает на вопрос. Я не уверен, почему это было принято в первую очередь. –

+0

@Dileep CK Причина, по которой у вас есть эти комментарии, заключается в том, что ваш вопрос возник в очереди низкого качества - первый комментарий к вашему сообщению - это автогенерация, потому что рецензент думал, что вы * задали другой вопрос *, даже не сделав попытку ответ. Есть много людей, которые ошибочно публикуют такие вещи, как «У меня тоже есть эта проблема, кто-нибудь ее разрешил?» в поле ответа. Ваш ответ выглядит так сначала, как румянец, потому что он начинается с «Мне нужно ...», поэтому я предложил переписать его. – Ajean

1
rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: 'register/isUsernameAvailable', 
     } 
     } 

Вам необходимо пройти имя пользователя

3

Я понимаю, что это старый, но у меня было трудное время получить эту работу, а также и хотел поделиться тем, что работал для меня.

Клиентский код проверки формы:

$('#frmAddNew').validate({ 
onkeyup: false, 
rules: { 
    ADID: { 
     required: true, 
     alphanumeric: true, 
     maxlength: 10, 
     remote: { 
      url: "ADIDValidation.cshtml", 
      type: "post", 
      dataType: "json", 
      dataFilter: function (data) { 
       if (data) { 
        var json = $.parseJSON(data); 
        if (json[0]) { 
         return JSON.stringify(json[0].valid) /* will be "true" or whatever the error message is */ 
        } 
       } 
      }, 
      complete: function (data) { 
       /* Additional code to run if the element passes validation */ 
       if (data) { 
        var json = $.parseJSON(data.responseText); 
        if (json[0]) { 
         if (json[0].valid === "true") { 
          $('#FirstName').val(json[0].FirstName); 
          $('#LastName').val(json[0].LastName); 
         } 
        } 
       } 
      } 
     } 
    } 
}, 
messages: { 
    ADID: { 
     required: "Please Enter an ADID of the Employee", 
     alphanumeric: "The ADID Can Only Contain Letters and Numbers", 
     maxlength: "ADID For User's Current Permissions Must Be 10 Characters or Less" 
    } 
}, 
submitHandler: function (form) { 
    form.submit(); 
}, 
errorContainer: $('section.errorCon'), 
errorLabelContainer: $('ol', 'section.errorCon'), 
wrapper: 'li', 
showErrors: function (errors) { 
    var error = this.numberOfInvalids(); 
    var message = error == 1 
     ? 'You missed 1 field:' 
     : 'You missed ' + error + ' fields:'; 
    $('section.errorCon h3').html(message); 
    this.defaultShowErrors(); 
} 
}); 

на стороне сервера код ADIDValidation.cshtml (я использую Razor веб-страниц):

@{ 

Layout = null; 

if(IsPost) 
{ 
    var db = Database.Open("<enter connection name>"); 
    var sql = "<enter sql or stored procedure>"; 
    var strADID = Request["ADID"]; 

    var result = db.Query(sql, strADID); 
    IEnumerable<dynamic> response; 

    if(result.Any()) 
    { 
     @* "true" indicates the element passes validation. Additional data can be passed to a callback function *@ 
     response = result.Select(x => new 
     { 
      valid = "true", 
      FirstName = x.FirstName, 
      LastName = x.LastName 
     }); 
    } 

    else 
    { 
     @* The element did not pass validation, the message below will be used as the error message *@ 
     response = new[] { 
      new {valid = "The Employee's ADID '" + strADID.ToString() + "' Is Not Valid. Please Correct and Resubmit"} 
     }; 
    } 

    Json.Write(response, Response.Output); 
} 
} 
Смежные вопросы