OctoberCMS 表单验证警报问题答案

【问题标题】：OctoberCMS form validation alert issueOctoberCMS 表单验证警报问题
【发布时间】：2017-01-12 14:18:34
【问题描述】：

我安装了 OctoberCMS 的新副本，添加了用户插件，并创建了主题。一切都是新鲜的，没有插件修改。现在我创建了注册页面并对其进行了测试。看起来表单验证有点好笑。我将所有字段留空，然后单击提交按钮。

它会像这样抛出警告框，这有点出乎意料。

然后，如果我再次单击提交按钮，表单验证会显示字段错误 - 就像通常那样。我只想要这种没有弹出框的警报..

有人知道为什么会这样吗？

【问题讨论】：

标签： forms validation octobercms

【解决方案1】：

javascript 警报 name field is required 是由 OctoberCMS 的 AJAX 框架抛出的，因为您提交的表单未通过模型的验证规则。

检查您的用户模型，您可能会注意到name 字段是必需的。

public $rules = [ 'name' => 'required' ]; // no name was supplied

这里有两种选择；

使用JS提交前验证表单数据

    $('button.submit').click(function(e){
        e.preventDefault(); // prevent submission

    // check Form fields are valid

      // then Submit form using the AJAX API - OnCreateUser

        $.request('onCreateUser', {
        data: {name : ..., surname: ....}, // Data Object
        error: function(jqXHR, textStatus, error){
            // handle errors..
          }
        });
    });

为您的站点使用全局 AJAX 处理程序 - 弹出窗口不会显示，但您需要处理这些事件并提醒用户

    $window.on('ajaxErrorMessage', function(event, message){
        //   ....
        event.preventDefault();
    });
    $window.on('ajaxError', function(event, context, status,jqXHR ){
        //   ....
        event.preventDefault();
    });

另外建议您在组件中使用validator 类并检查提交的数据 - 您还可以添加自定义验证规则/消息

  public function onCreateUser()
    {
        if (Request::ajax()) {

            $customMessages = [
             'name.required' => 'Name Field is required',
             'email.required' => 'Email field is required',
          ];

          $customAttributes = [
            'email' => 'Email',
            'name' => 'Name',
          ];

            $data = post();
            $rules['name']  = 'required';
            $rules['email'] = 'required';


            $validation = Validator::make($data, $rules,$customMessages, $customAttributes);
            if ($validation->fails()) {
                $messages = json_encode($validation->messages(), true);
                throw new ValidationException(array(
                    'title' => 'Error Creating User',
                    'message' => $messages
                ));
            }   

           ..........

        } 
    }

【讨论】：