Динамическая проверка формы в модале начальной загрузки с использованием php и jquery

Question

Я изначально полагался на обновление страницы, которое затем отображало любые ошибки (если не были заполнены обязательные поля) в форме добавления / редактирования моего адреса на основе проверяющей функции из файла контроллера php.Затем я адаптировал свою форму для использования модуса начальной загрузки вместо этого с динамически загружаемой формой, которую я получил для фантастической работы над отправкой данных.Однако одна небольшая проблема, с которой я столкнулся, заключается в том, что, хотя внутренняя проверка не позволяет обновленным / добавленным данным фактически отправлять форму, она не отображает ошибку проверки на стороне клиента, которая, в свою очередь, не позволяет закрывать и модально закрываться.Похоже, не представить ничего.Я посмотрел на эту ссылку: ZF2 - проверка в модале начальной загрузки , но, похоже, она не соответствует моим потребностям.Я действительно хотел бы избежать использования jquery для полностью проверки моей формы на стороне клиента.Мне просто нужно использовать jquery с вызовом ajax, чтобы как-то проверить мой существующий файл контроллера php и показать любые ошибки непосредственно в моем модальном режиме, а также предотвратить отправку формы при обнаружении таких ошибок.

Соответствующий код из моего php-файла:

public function getAddressForm() {
    $this->load->language('customer/customer');

    if (isset($this->request->get['customer_id'])) {
        $customer_id = $this->request->get['customer_id'];
    } else {
        $customer_id = 0;
    }   

    $this->load->model('customer/customer');

    $data['text_address'] = !isset($customer_id, $this->request->get['address_id']) ? $this->language->get('text_address_add') : $this->language->get('text_address_edit');

    if (isset($this->error['firstname'])) {
        $data['error_firstname'] = $this->error['firstname'];
    } else {
        $data['error_firstname'] = '';
    }

    if (isset($this->error['lastname'])) {
        $data['error_lastname'] = $this->error['lastname'];
    } else {
        $data['error_lastname'] = '';
    }

    if (isset($this->error['address_1'])) {
        $data['error_address_1'] = $this->error['address_1'];
    } else {
        $data['error_address_1'] = '';
    }

    if (isset($this->error['city'])) {
        $data['error_city'] = $this->error['city'];
    } else {
        $data['error_city'] = '';
    }

    if (isset($this->error['postcode'])) {
        $data['error_postcode'] = $this->error['postcode'];
    } else {
        $data['error_postcode'] = '';
    }

    if (isset($this->error['country'])) {
        $data['error_country'] = $this->error['country'];
    } else {
        $data['error_country'] = '';
    }

    if (isset($this->error['zone'])) {
        $data['error_zone'] = $this->error['zone'];
    } else {
        $data['error_zone'] = '';
    }

    if (isset($this->error['custom_field'])) {
        $data['error_custom_field'] = $this->error['custom_field'];
    } else {
        $data['error_custom_field'] = array();
    }

    if (!isset($this->request->get['address_id'])) {
        $data['address_action'] = $this->url->link('customer/customer/addaddress', 'user_token=' . $this->session->data['user_token'] . '&customer_id=' . $customer_id , true);
    } else {
        $data['address_action'] = $this->url->link('customer/customer/editaddress', 'user_token=' . $this->session->data['user_token'] . '&customer_id=' . $customer_id . '&address_id=' . $this->request->get['address_id'], true);
    }

    if (isset($this->request->get['address_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) {
        $address_info = $this->model_customer_customer->getAddress2($customer_id, $this->request->get['address_id']);
    }

    if (isset($this->request->post['firstname'])) {
        $data['firstname'] = $this->request->post['firstname'];
    } elseif (!empty($address_info)) {
        $data['firstname'] = $address_info['firstname'];
    } else {
        $data['firstname'] = '';
    }

    if (isset($this->request->post['lastname'])) {
        $data['lastname'] = $this->request->post['lastname'];
    } elseif (!empty($address_info)) {
        $data['lastname'] = $address_info['lastname'];
    } else {
        $data['lastname'] = '';
    }

    if (isset($this->request->post['company'])) {
        $data['company'] = $this->request->post['company'];
    } elseif (!empty($address_info)) {
        $data['company'] = $address_info['company'];
    } else {
        $data['company'] = '';
    }

    if (isset($this->request->post['address_1'])) {
        $data['address_1'] = $this->request->post['address_1'];
    } elseif (!empty($address_info)) {
        $data['address_1'] = $address_info['address_1'];
    } else {
        $data['address_1'] = '';
    }

    if (isset($this->request->post['address_2'])) {
        $data['address_2'] = $this->request->post['address_2'];
    } elseif (!empty($address_info)) {
        $data['address_2'] = $address_info['address_2'];
    } else {
        $data['address_2'] = '';
    }

    if (isset($this->request->post['postcode'])) {
        $data['postcode'] = $this->request->post['postcode'];
    } elseif (!empty($address_info)) {
        $data['postcode'] = $address_info['postcode'];
    } else {
        $data['postcode'] = '';
    }

    if (isset($this->request->post['city'])) {
        $data['city'] = $this->request->post['city'];
    } elseif (!empty($address_info)) {
        $data['city'] = $address_info['city'];
    } else {
        $data['city'] = '';
    }

    if (isset($this->request->post['country_id'])) {
        $data['country_id'] = (int)$this->request->post['country_id'];
    }  elseif (!empty($address_info)) {
        $data['country_id'] = $address_info['country_id'];
    } else {
        $data['country_id'] = $this->config->get('config_country_id');
    }

    if (isset($this->request->post['zone_id'])) {
        $data['zone_id'] = (int)$this->request->post['zone_id'];
    }  elseif (!empty($address_info)) {
        $data['zone_id'] = $address_info['zone_id'];
    } else {
        $data['zone_id'] = '';
    }

    $this->load->model('localisation/country');

    $data['countries'] = $this->model_localisation_country->getCountries();

    if (isset($this->request->post['default'])) {
        $data['default'] = $this->request->post['default'];
    } elseif (isset($this->request->get['address_id'])) {
        $data['default'] = $this->request->get['address_id'];
    } else {
        $data['default'] = '';
    }

    $this->response->setOutput($this->load->view('customer/customer_address_form', $data));
}

public function addAddress() {
    $this->load->language('customer/customer');

    if (isset($this->request->get['customer_id'])) {
        $customer_id = $this->request->get['customer_id'];
    } else {
        $customer_id = 0;
    }   

    $this->load->model('customer/customer');

    if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validateAddressForm()) {
        $this->model_customer_customer->addAddress($this->request->get['customer_id'], $this->request->post);

    }

    $this->getAddressForm();        
}

public function editAddress() {

    $this->load->language('customer/customer');

    if (isset($this->request->get['customer_id'])) {
        $customer_id = $this->request->get['customer_id'];
    } else {
        $customer_id = 0;
    }   

    $this->load->model('customer/customer');

    if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validateAddressForm()) {
        $this->model_customer_customer->editAddress($this->request->get['customer_id'], $this->request->get['address_id'], $this->request->post);

    }

    $this->getAddressForm();
}

protected function validateAddressForm() {
    if ((utf8_strlen(trim($this->request->post['firstname'])) < 1) || (utf8_strlen(trim($this->request->post['firstname'])) > 32)) {
        $this->error['firstname'] = $this->language->get('error_firstname');
    }

    if ((utf8_strlen(trim($this->request->post['lastname'])) < 1) || (utf8_strlen(trim($this->request->post['lastname'])) > 32)) {
        $this->error['lastname'] = $this->language->get('error_lastname');
    }

    if ((utf8_strlen(trim($this->request->post['address_1'])) < 3) || (utf8_strlen(trim($this->request->post['address_1'])) > 128)) {
        $this->error['address_1'] = $this->language->get('error_address_1');
    }

    if ((utf8_strlen(trim($this->request->post['city'])) < 2) || (utf8_strlen(trim($this->request->post['city'])) > 128)) {
        $this->error['city'] = $this->language->get('error_city');
    }

    $this->load->model('localisation/country');

    $country_info = $this->model_localisation_country->getCountry($this->request->post['country_id']);

    if ($country_info && $country_info['postcode_required'] && (utf8_strlen(trim($this->request->post['postcode'])) < 2 || utf8_strlen(trim($this->request->post['postcode'])) > 10)) {
        $this->error['postcode'] = $this->language->get('error_postcode');
    }

    if ($this->request->post['country_id'] == '' || !is_numeric($this->request->post['country_id'])) {
        $this->error['country'] = $this->language->get('error_country');
    }

    if (!isset($this->request->post['zone_id']) || $this->request->post['zone_id'] == '' || !is_numeric($this->request->post['zone_id'])) {
        $this->error['zone'] = $this->language->get('error_zone');
    }

    return !$this->error;
}

Соответствующий код в моем файле ветки, который заставляет модальную форму работать и отправлять данные, но не позволяет показать проверку на стороне клиента:

<script type="text/javascript"><!--
function update_address(id){

    $('#updateAddressModal').modal();
    $('#updateAddressModal .modal-body').load('index.php?route=customer/customer/editaddress&user_token={{ user_token }}&customer_id={{ customer_id }}&address_id='+id, function(){
        $('#updateAddressModal #address_form').submit(function(e){

            e.preventDefault();

            var post_url = $(this).attr("action");
            var request_method = $(this).attr("method");
            var form_data = $(this).serialize();

            $.ajax({
                url : post_url,
                type: request_method,
                data : form_data
            }).done(function(response){
                $('#updateAddressModal').modal('hide');
                $('#address').load('index.php?route=customer/customer/getaddresslist&user_token={{ user_token }}&customer_id={{ customer_id }}');

            });
        });

        $('#updateAddressModal select[name=\'country_id\']').trigger('change');
    });


}
//--></script>
<script type="text/javascript"><!--
function add_address(){
    $('#addAddressModal').modal();
    $('#addAddressModal .modal-body').load('index.php?route=customer/customer/addaddress&user_token={{ user_token }}&customer_id={{ customer_id }}', function(){
        $('#addAddressModal #address_form').submit(function(e){

            e.preventDefault();

            var post_url = $(this).attr("action");
            var request_method = $(this).attr("method");
            var form_data = $(this).serialize();

            $.ajax({
                url : post_url,
                type: request_method,
                data : form_data
            }).done(function(response){
                $('#addAddressModal').modal('hide');
                $('#address').load('index.php?route=customer/customer/getaddresslist&user_token={{ user_token }}&customer_id={{ customer_id }}');

            });
        });

        $('#addAddressModal select[name=\'country_id\']').trigger('change');
    });
}
//--></script>

Мое "действие" в форме моего модального режима - это то, что диктует, будет ли модальное добавление или редактирование существующего адреса.Я уверен, что ответ лежит где-то с ним, чтобы проверить для подтверждения через вызов ajax, я думаю (?), Так что это то, где я в тупике. :

<form action="{{ address_action }}" id="address_form" method="post" enctype="multipart/form-data" class="form-horizontal">
    <fieldset>
      <div class="form-group">
        <label class="col-sm-4 control-label" for="input-company">{{ entry_company }}</label>
        <div class="col-sm-8">
          <input type="text" name="company" value="{{ company }}" placeholder="{{ entry_company }}" id="input-company" maxlength="32" class="form-control" />
        </div>
      </div>    
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-firstname">{{ entry_firstname }}</label>
        <div class="col-sm-8">
          <input type="text" name="firstname" value="{{ firstname }}" placeholder="{{ entry_firstname }}" id="input-firstname" maxlength="16" class="form-control" />
          {% if error_firstname %}
          <div class="text-danger">{{ error_firstname }}</div>
          {% endif %}
         </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-lastname">{{ entry_lastname }}</label>
        <div class="col-sm-8">
          <input type="text" name="lastname" value="{{ lastname }}" placeholder="{{ entry_lastname }}" id="input-lastname" maxlength="16" class="form-control" />
          {% if error_lastname %}
          <div class="text-danger">{{ error_lastname }}</div>
          {% endif %}
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-address-1">{{ entry_address_1 }}</label>
        <div class="col-sm-8">
          <input type="text" name="address_1" value="{{ address_1 }}" placeholder="{{ entry_address_1 }}" id="input-address-1" maxlength="32" class="form-control" />
          {% if error_address_1 %}
          <div class="text-danger">{{ error_address_1 }}</div>
          {% endif %}
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-4 control-label" for="input-address-2">{{ entry_address_2 }}</label>
        <div class="col-sm-8">
          <input type="text" name="address_2" value="{{ address_2 }}" placeholder="{{ entry_address_2 }}" id="input-address-2" maxlength="32" class="form-control" />
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-city">{{ entry_city }}</label>
        <div class="col-sm-8">
          <input type="text" name="city" value="{{ city }}" placeholder="{{ entry_city }}" id="input-city" maxlength="30" class="form-control" />
          {% if error_city %}
          <div class="text-danger">{{ error_city }}</div>
          {% endif %}
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-zone">{{ entry_zone }}</label>
        <div class="col-sm-8">
          <select name="zone_id" id="input-zone" class="form-control">
          </select>
          {% if error_zone %}
          <div class="text-danger">{{ error_zone }}</div>
          {% endif %}
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-postcode">{{ entry_postcode }}</label>
        <div class="col-sm-8">
          <input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" id="input-postcode" class="form-control" />
          {% if error_postcode %}
          <div class="text-danger">{{ error_postcode }}</div>
          {% endif %}
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-4 control-label" for="input-country">{{ entry_country }}</label>
        <div class="col-sm-8">
          <select name="country_id" id="input-country" onchange="country(this, '{{ zone_id }}');" class="form-control">
            <option value="">{{ text_select }}</option>
              {% for country in countries %}
              {% if country.country_id == country_id %}
              <option value="{{ country.country_id }}" selected="selected">{{ country.name }}</option>
              {% else %}
              <option value="{{ country.country_id }}">{{ country.name }}</option>
              {% endif %}
              {% endfor %}
          </select>
          {% if error_country %}
          <div class="text-danger">{{ error_country }}</div>
          {% endif %}
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-4 control-label">{{ entry_default }}</label>
        <div class="col-sm-8">
          {% if default %}
          <label class="radio-inline">
            <input type="radio" name="default" value="1" checked="checked" />
            {{ text_yes }}</label>
          <label class="radio-inline">
            <input type="radio" name="default" value="0" />
            {{ text_no }}</label>
          {% else %}
          <label class="radio-inline">
            <input type="radio" name="default" value="1" />
            {{ text_yes }}</label>
          <label class="radio-inline">
            <input type="radio" name="default" value="0" checked="checked" />
            {{ text_no }}</label>
          {% endif %}
        </div>
      </div>
    </fieldset>
    <div class="text-center" style="padding:12px;"><button id="save-address" type="submit" class="btn btn-primary">Save Address</button></div>
</form>

Я подозреваю, что мне может понадобитьсяиспользуйте json во всем этом для отображения ошибок, но я не уверен.Я использую jquery 2.1.1 для этого конкретного проекта, а также для начальной загрузки 3.3.0, но я могу адаптировать любые ответы, брошенные на меня, если кто-то может указать мне правильное направление.

ОБНОВЛЕНИЕ: Я отметил правильный ответ ниже, который мне очень помог.Чтобы включить то, что я сделал с ответом, я заключил свои ошибки в пустые div и просто использовал .html, чтобы заполнить их найденными ошибками.

Пример:

  <div class="form-group required">
    <label class="col-sm-4 control-label" for="input-postcode">{{ entry_postcode }}</label>
    <div class="col-sm-8">
      <input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" id="input-postcode" class="form-control" />
      {% if error_postcode %}
      <div class="text-danger">{{ error_postcode }}</div>
      {% endif %}
    </div>
  </div>

Был изменен на:

  <div class="form-group required">
    <label class="col-sm-4 control-label" for="input-postcode">{{ entry_postcode }}</label>
    <div class="col-sm-8">
      <input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" id="input-postcode" class="form-control" />
      <div id="error-postcode"></div>
    </div>
  </div>

И затем, все, что мне нужно было сделать, это добавить свой .html для всех div-ов ошибок, которые мне нужны, чтобы заполнить любой ошибкой, аналогичной следующей:

        $.ajax({
            url: post_url,
            type: request_method,
            data: form_data
        }).done(function(response){
           if(!response.success) {
                //Dont close the modal, display the error
                $('#error-postcode').html('{% if error_postcode %}<div class="text-danger">{{ error_postcode }}</div>{% endif %}');
            }
            else {
                $('#addAddressModal').modal('hide'); 
                $('#address').load('index.php?route=customer/customer/getaddresslist&user_token={{ user_token }}&customer_id={{ customer_id }}');
            }

        });

Answer 1

Измените свой код вызова ajax ..

$.ajax({  
    type: request_method,  
    url:  "post_url",  
    data: form_data,  
    cache: false,  
    success: function(result){  
        if(result===1){  
            // On success redirect...return 1 from backend if no errors are there.  
         $('#addAddressModal').modal('hide');  
        }  
        else  
            //display error message..create response 'result' in backend such that you can display all errors
            //for eg : foreach error append a number to response and in client side use js include to check if certain error is there or not.
    }  
    }); 

---

Answer 2

Вы правы.Отправьте ответ JSON с сервера клиенту.Вы можете указать, была ли проверка успешной или нет, отправить причину вместе и т. Д.

В бэкэнде, если вы используете, например, Symphony, вы можете отправить ответ следующим образом:

return new JsonResponse(array('success' => false, 'message' => 'Invalid EMail'));

Таким образом, код на стороне клиента становится примерно таким:

$.ajax({
    url : post_url,
                type: request_method,
                data : form_data
    }).done(function(response){

        if(!response.success) {
            //Dont close the modal, display the error
            $('#err').html(response.message);
        }
        else {
            $('#addAddressModal').modal('hide'); 
            $('#address').load('index.php?route=customer/customer/getaddresslist&user_token={{ user_token }}&customer_id={{ customer_id 
        }
    });
});

Вы можете почти избежать разделов отображения ошибок в шаблоне, обрабатываемом PHP.Пусть интерфейс обрабатывает отображение ошибок.