Отправка оповещения после подтверждения ввода без перезагрузки страницы

Question

Я проверяю ввод формы с помощью проверки Grails для классов домена. Я могу различать действительные и недействительные входные данные, но проблема, которую я не могу решить, состоит в том, что я хочу показать отсутствующие / недействительные входные данные на странице без перезагрузки.

Я хотел использовать submitToRemote, как показано в примере:

<g:form action="show">
        Login: <input name="login" type="text"></input>
        <g:submitToRemote update="updateMe" />
</g:form>
<div id="updateMe">this div is updated by the form</div>

Не уверен, что это действительно тот путь, по которому я должен идти, какие-нибудь предложения?

Answer 1

Вы можете прикрепить действие в javascript, похожее на это (если вы используете jQuery):

$('#id_of_form').submit(function() {

   var login = $('input[name="login"]').val()
   if(login.length == 0) {
         // Show some error, about an empty login
         $('#updateMe').text('Empty login is not allowed')
         return false; // will prevent submitting the form
   }

   return true; // Will allow submitting the form 
})

Не проверено, но должно работать.

Answer 2

Мы переместили всю форму в шаблон и полностью отрендерили ее в Ajax, например:

_myForm.gsp :

<div id="userForm">

<!-- You can even add error list: -->
<g:hasErrors bean="${user}">
    <div class="errors">
      <grid:renderErrors bean="${user}"/>
    </div>
</g:hasErrors>

<g:form action="ajaxLogin">
        Login: <g:textField name="login" type="text" value="${user.login}"
          class="${hasErrors(bean: user, field: 'login', 'errors')}" />
        <g:submitToRemote update="userForm" />
</g:form>
</div>

контроллер:

def ajaxLogin = {
    User user = new User(params)
    if (!user.save()) {
        // validation errors get rendered here
        render template: 'myForm', model: [user : user]
    } else {
        render template: 'nextStep', model: [user : user, whatever: whatever]
    }
}

У пользователя сложилось впечатление, что форма осталась прежней.

Хотя для входа в систему я бы порекомендовал использовать плагин SpringSecurity и не повторять его.

Answer 3

Вы можете использовать параметр before элемента submitToRemote для вызова метода Javascript, который выполняет проверку (и обновляет страницу при любых ошибках) асинхронно.Я думаю, что метод должен был бы вернуть ложь, если были какие-либо ошибки, в противном случае верните истину.