在同时使用php和jquery的引导模态中动态验证表单 [英] Validating a form dynamically within a bootstrap modal using both php and jquery
本文介绍了在同时使用php和jquery的引导模态中动态验证表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我最初是依靠页面刷新，然后根据来自php控制器文件中的验证功能，在我的地址添加/编辑表单上显示任何错误(如果不满足必填字段).然后，我将表单修改为使用引导程序模式，而不是动态加载的表单，该表单对于提交数据非常有用.但是，我有一个小问题是，尽管后端验证将阻止更新/添加的数据实际提交表单，但它不会显示客户端验证错误，而这又会阻止模式关闭和似乎没有提交任何东西.我看了以下链接: ZF2-在引导模态中进行验证，但它没有似乎不适合我的需求.我真的很想避免使用jquery以某种方式完全在客户端上验证我的表单.我只需要使用带有ajax调用的jquery来以某种方式检查我现有的php控制器文件，并在我的模式中直接显示任何错误，同时如果发现此类错误，还可以阻止表单提交.
I initially was relying on a page refresh which then displayed any errors (if required fields were not met) on my address add/edit form based on a validating function from within a php controller file. I then adapted my form to use a bootstrap modal instead with a dynamically loaded form which I got to work fantastically for submitting the data. However, the one slight issue I have is that while a back-end validation will prevent the updated/added data from actually submitting the form, it doesn't display a client-side validation error which in turn will prevent the modal from closing and not appear to submit anything. I looked at this link: ZF2 - validation within a bootstrap modal but it doesn't seem to suit my needs. I really would like to avoid using jquery to entirely validate my form on the client-side somehow. I just need to use jquery with an ajax call to somehow check against my existing php controller file and show any errors directly in my modal while also preventing the form submitting if such errors are found.
我的php文件中的相关代码:
Pertinent code from my php file:
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;
}
我的树枝文件上的相关代码使模态表单可以工作并提交数据，但无法显示客户端验证:
Pertinent code on my twig file that makes the modal form work and submit data, but no way to show client-side validation:
<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调用来检查验证，所以这就是我的困惑.
My "action" in the form of my modal is what dictates if the modal is adding or editing an existing address. I'm sure the answer lies somewhere with it to check for validation through an ajax call I guess(?), so this is where I am stumped.:
<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来显示错误，但是我不确定.我正在为我的这个特定项目以及Bootstrap 3.3.0使用jquery 2.1.1，但是如果有人可以指出我正确的方向，我可以适应向我抛出的 any 答案
I am suspecting that I may need to use json in all of this to display the errors, but I am unsure. I'm using jquery 2.1.1 for this particular project of mine as well as bootstrap 3.3.0, but I can adapt any answers thrown at me for it if someone can point me in my the right direction.
更新:我在下面标记了正确的答案，对我有很大帮助.为了包括答案，我将错误包裹在空div中，并简单地使用.html将发现的任何错误填充到它们中.
UPDATE: I marked the correct answer below which helped me tremendously. To include what I did with the answer, I encased my errors in empty divs and simply used .html to populate them with any errors found.
示例:
<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>
然后，我需要做的就是继续为所有需要填充所有错误的div添加.html，如下所示:
And then, all I needed to do was keep adding my .html for all the error divs I needed to populate with any errorssimilar as follows:
$.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 }}');
}
});
推荐答案
您是对的.从服务器向客户端发送JSON响应.您可以指定验证是否成功，并在原因旁边发送原因
You are right. Send a JSON response from the server to the client. You can specify whether the validation was successful or not, send the reason alongside etc
在后端，如果您正在使用，例如说Symphony，则可以像这样发送响应:
In the backend, if you are using, say Symphony, you can send the response like this:
return new JsonResponse(array('success' => false, 'message' => 'Invalid EMail'));
因此，客户端代码变成了这样的东西:
So, the client side code becomes something like this:
$.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处理的模板的错误显示部分.让前端处理错误的显示.
You can almost avoid the error display sections of the template handled by PHP. Let the frontend handle the display of errors.
这篇关于在同时使用php和jquery的引导模态中动态验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
