我在 Drupal 7 中创建了一个表单并想使用 AJAX。我将其添加到提交按钮数组中:
"#ajax" => array(
"callback" => "my_callback",
"wrapper" => "details-container",
"effect" => "fade"
)
这可行,但整个验证功能被忽略。如何在调用
my_callback()
之前验证表单?如何在 AJAX 表单上显示状态或错误消息?
这个问题和答案帮助我找到了正确的解决方案,但它并不完全清楚。让我们就这样吧。
需要非常注意的事情:
#ajax['wrapper']
#markup
,而是因为他将 div 包含在包装器 id 集中。
function dr_search_test_form($form, &$fstate) {
$form["wrapper"] = array("#markup" => "<div id='test-ajax'></div>");
$form["name"] = array(
"#type" => "textfield",
"#required" => true,
"#title" => "Name"
);
$form["submit"] = array(
"#type" => "submit",
"#value" => t("Send"),
"#ajax" => array(
"callback" => "dr_search_test_form_callback",
"wrapper" => "test-ajax",
"effect" => "fade",
),
);
return $form;
}
function dr_search_test_form_callback($form, &$fstate) {
return "<div id='test-ajax'>Wrapper Div</div>";
}
function dr_search_test_form_validate($form, &$fstate) {
form_set_error("name", "Some error to display.");
}
归功于此人的博客:
http://saw.tl/validate-form-ajax-submit-callback
他提出的解决方案如下:
// when creating or altering the form..
{
$form['#prefix'] = '<div id="formwrapper">';
$form['#suffix'] = '</div>';
// the submit button
$form['save']['#ajax'] = array(
'callback' => 'mymodule_form_ajax_submit',
'wrapper' => 'formwrapper',
'method' => 'replace',
'effect' => 'fade',
);
// ...
}
function mymodule_from_ajax_submit($form, &$form_state) {
// validate the form
drupal_validate_form('mymodule_form_id', $form, $form_state);
// if there are errors, return the form to display the error messages
if (form_get_errors()) {
$form_state['rebuild'] = TRUE;
return $form;
}
// process the form
mymodule_form_id_submit($form, $form_state);
$output = array(
'#markup' => 'Form submitted.'
);
// return the confirmation message
return $output;
}
这个用例非常困难并且没有文档记录,这一事实非常令人沮丧。对我来说,这似乎是 AJAX 表单 API 的最基本请求。好的,发泄完我的沮丧,到解决方案上。
这就是我最终为了让它发挥作用所做的事情。感觉不对。如果单个页面上有多个表单实例,它也会中断,但这是我能做的最好的事情。如果有人可以阐明这一点,请这样做!
基本上,您必须在回调中将整个表单替换为其自身,并手动将任何设置的消息添加到表单对象中。通过将包装器声明为表单的 id 来完成此操作(如果单个页面上存在表单的多个实例,则会中断,因为 ID 将被更新)。
function productsearchbar_savesearch_form($form, &$form_state) {
$form["wrapper"] = array("#markup" => "<div class='inline-messages'></div>");
$form["name"] = array(
"#type" => "textfield",
"#required" => true,
"#title" => "Name"
);
$form["submit"] = array(
"#type" => "submit",
"#value" => "Send",
"#ajax" => array(
"callback" => "productsearchbar_savesearch_form_callback",
"wrapper" => "productsearchbar-savesearch-form",
"effect" => "fade"
)
);
return $form;
}
function productsearchbar_savesearch_form_callback($form, &$form_state) {
$messages = theme('status_messages');
if($messages){
$form["wrapper"] = array("#markup" => "<div class='inline-messages'>$messages</div>");
}
return $form;
}
function productsearchbar_savesearch_form_validate($form, &$form_state) {
if ($form_state['values']['name'] == '') {
form_set_error('', t('Name field is empty!'));
}
}
function productsearchbar_savesearch_form_submit($form, &$form_state) {
drupal_set_message(t('Your form has been saved.'));
}
类似这样的:
return array("#markup" => "<div id='wrapper'></div>");
使用jquery验证的方法通过javascript触发器来触发ajax事件:
// Prevent form submission when there are client-side errors, trigger ajax event when it is valid
(function ($) {
Drupal.behaviors.submitForm = {
attach: function (context) {
var $form = $("form#validated_form", context);
var $submitButton = $('input[type="submit"]', $form);
$form
.once('submitForm')
.off('submit')
.on('submit', function(e){
// Prevent normal form submission
e.preventDefault();
var $form = $(this);
// The trigger value should match what you have in your $form['submit'] array's ajax array
//if the form is valid, trigger the ajax event
if($form.valid()) {
$submitButton.trigger('submit_form');
}
});
}
};
})(jQuery);
将 javascript 触发器引用为监听的 ajax 事件:
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
'#ajax' => array(
'event' => 'submit_form',
'callback' => 'callback_function_for_when_form_is_valid',
'wrapper' => 'validated_form'
)
);
现在,只要点击提交按钮就会触发验证,并且只有在有效时才会进行服务器端验证!
jQuery('#button-id').mousedown(function() {
var textval = $("#get-text-val").val();
if (textval == '') {
$("#apend-error-msg").append('<div id="add-text-error" class="add-text-error">error msg</div>');
return false;
}
else {
return true;
}
return false;
});