2013-07-09 3 views
0

Недавно я изучал AJAX и jQuery, чтобы проверить мои формы, а не использовать проверки при обновлении. У меня есть представление формы с правильной работой AJAX - отправка формы успешно без обновления страницы - однако, когда форма отправляется и передается через проверки в User.php, если какие-либо ошибки возвращаются, они отображаются в отдельной форме, а не оригинальная форма, из которой были отправлены данные.Репликация формы с помощью формы проверки Ajax/jQuery

РЕДАКТИРОВАТЬ: Ошибки продолжают поступать - «impode (',', $ error)» работает, но я обнаружил, что он не работает в хроме. Я уверен, что есть быстрое решение для этого, но я не могу найти тот, который работает.

create.ctp

<?php echo $this->Html->script('jquery', FALSE); ?> 
    <?php echo $this->Html->script('validation', FALSE); ?> 
    <div id="success"></div> 
    <div class="users form"> 
     <h2>Create User</h2> 
    <?php echo $this->Form->create('User'); ?> 
<fieldset> 
<?php 
    echo $this->Form->input('username', array('id'=>'username')); 
    echo $this->Form->input('password', array('id'=>'password')); 
      echo $this->Form->input('confirmpw', array('label'=>'Confirm Password', 'id'=>'confirmpw', 'type'=>'password')); 
      echo $this->Form->input('tos', array('type'=>'checkbox', 'id'=>'tos', 'label' 
       =>__('I confirm I have read the Terms and Conditions', true), 'hidden'=>false, 'value'=>'yes')); 
    ?> 
</fieldset> 
    <?php 

    echo $this->Js->submit('Send', array(
     'before'=>$this->Js->get('#sending')->effect('fadeIn'), 
     'success'=>$this->Js->get('#sending')->effect('fadeOut'), 
     'update'=>'#success' 
    )); 
    echo $this->Form->end(); 
    ?> 
     <div id="sending" style="display: none; background-color: lightblue;">Sending...</div> 
<?php 

?> 
    </div> 

validation.js

$(document).ready(function() { 
$('#username').blur(function(){ 
    $.post(
     '/practice/Users/validate_form', 
     { field: $('#username').attr('id'), value: $('#username').val() }, 
     handleUsernameValidation 
    ); 
}); 

function handleUsernameValidation(error) { 
    if (error.length > 0) { 
     if ($('#username-notEmpty').length == 0) { 
      $('#username').after('<div id="username-notEmpty" class="error-message">' + error + "</div>"); 
     } 
    } 
    else { 
     $('#username-notEmpty').remove(); 
    } 
} 
} 
) 

UsersController.php

 public function create() { 
    if ($this->request->is('post')) { 
     $this->User->create(); 
     if ($this->User->save($this->request->data)) { 
      if ($this->RequestHandler->isAjax()) { 
       $this->render('/Messages/success', 'ajax'); 
      } 
      else { 
      $this->Session->setFlash(__('The user has been saved')); 
      $this->redirect(array('action' => 'index')); 
      } 
     } 
    } 
} 

     public function validate_form() { 
    if ($this->RequestHandler->isAjax()) { 
     $field = $this->request->data['field']; 
     $value = $this->request->data['value']; 
     $this->request->data['User'][$field] = $value; 
     $this->User->set($this->request->data); 
     if ($this->User->validates()) { 
      $this->autoRender = FALSE; 
     } 
     else { 
      $error = $this->validateErrors($this->User); 
      $this->set('error', $error[$this->request->data['field']]); 
     } 
    } 
} 

validate_form.ctp

<?php echo implode(',', $error); ?> 

User.php

public $validate = array(
    'username' => array(
     'notempty' => array(
      'rule' => array('notempty'), 
      'message' => 'Field cannot be empty.', 
      'allowEmpty' => false, 
      'required' => true, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
     'alphanumeric' => array(
      'rule' => array('alphanumeric'), 
      'message' => 'Only alphanumeric characters allowed.', 
      'allowEmpty' => false, 
      'required' => true, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
     'maxlength' => array(
      'rule' => array('maxlength', '15'), 
      'message' => 'Login name limit is 15 characters.', 
      //'allowEmpty' => false, 
      //'required' => false, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
     'minlength' => array(
      'rule' => array('minlength', '6'), 
      'message' => 'Login name must be more than 6 characters.', 
      //'allowEmpty' => false, 
      //'required' => false, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
        'isUnique' => array(
          'rule' => array('isUnique'), 
          'message' => 'This username is not available, please pick a different name.', 
        ), 
    ), 
    'password' => array(
     'notempty' => array(
      'rule' => array('notempty'), 
      'message' => 'Field cannot be empty.', 
      'allowEmpty' => false, 
      'required' => true, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
       'maxlength' => array(
      'rule' => array('maxlength', '15'), 
      'message' => 'Password limit is 15 characters.', 
      //'allowEmpty' => false, 
      //'required' => false, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
     'minlength' => array(
      'rule' => array('minlength', '6'), 
      'message' => 'Password must be more than 6 characters.', 
      //'allowEmpty' => false, 
      //'required' => false, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 

    ), 
      'confirmpw' => array(
       'maxlength' => array(
      'rule' => array('maxlength', '15'), 
      'message' => 'Password limit is 15 characters.', 
      //'allowEmpty' => false, 
      //'required' => false, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
     'minlength' => array(
      'rule' => array('minlength', '6'), 
      'message' => 'Password must be more than 6 characters.', 
      //'allowEmpty' => false, 
      //'required' => false, 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
        ), 
        'notEmpty' => array(
          'rule' => array('notempty'), 
          'message' => 'Passwords do not match, please try again.' 
        ), 
        'equalToField' => array(
         'rule' => array('equalToField', 'password'), 
         'message' => 'Passwords do not match, please try again.', 
         //'allowEmpty' => false, 
         //'required' => false, 
         //'last' => false, // Stop validation after this rule 
         'on' => 'create', //Limit validation to 'create' or 'update' operations 
        ) 
      ), 

    'tos' => array(
       'comparison' => array(
        'rule' => array('comparison', '==', 'yes'), 
        'required' => true, 
        'message' => 'Please agree to the Terms and Conditions.' 
      //'last' => false, // Stop validation after this rule 
      //'on' => 'create', // Limit validation to 'create' or 'update' operations 
     ), 
      ), 
); 

    function equalToField($check, $otherfield) { 
     $fname = ''; 
     foreach ($check as $key => $value) { 
      $fname = $key; 
      break; 
     } 
     return $this->data[$this->name][$otherfield] === $this->data[$this->name][$fname]; 
    } 

Спасибо.

+0

Одна из других «ошибок», с тех пор я решил, хотя другой стал очевидным, чего не было, прежде чем я начал добавлять jQuery. Когда я нажимаю кнопку «Отправить» в форме, она передает проверки с User.php (у меня наверняка нет ошибок), а при обновлении страницы пользователь должен знать, что им нужно, чтобы заполнить/что они сделали неправильно , однако он дублирует форму - одну форму с сообщениями об ошибках и исходной формой jquery/ajax. Кажется, я не могу найти, какие строки кода копируют форму при подаче. – XstiX

+0

Отредактировал вопрос и добавил 'User.php'. – XstiX

+0

Вы уже отметили ответ как правильный. Для каждого вопроса, который у вас есть, откройте новый вопрос (после исследования). Мы не работаем как форум. Проверьте страницы [help] и [About], чтобы узнать правила и этикетки сайта. – brasofilo

ответ

0

Насколько я помню, validateErrors возвратил массив сообщений об ошибках для каждого поля.

Можете ли вы попробовать это в validate_form.ctp

<?php echo implode(',', $error); ?> 

Или, если это не работает, давайте попробуем

<?php echo var_export($error); ?> 

и посмотреть, какой переменной, что»$ ошибка содержит.

+0

Раньше я пытался использовать функцию «implode», но не мог заставить ее работать, но это работает! Я дам вам правильный ответ, однако есть еще проблема, о которой я недавно упомянул в комментариях выше, которые я только что открыл, и я был бы признателен за любую помощь в этом. – XstiX

Смежные вопросы