Question

我正在尝试提交音乐上传表单，我从另一个页面获取输入字段的数据。我只是想做一件简单的事情：如果我删除其中一个必填字段，我希望控制台显示表单错误。

这是视图（upload.php）：

<?php echo form_open_multipart('uploads/verify', array('id' => 'upload_form')); ?>
    <section id="upload">
      <h2><strong><?= $title; ?></strong></h2>
      <div class="col-lg-6" id="col1">
        <div class="form-group">
          <label>Title <label class="star">*</label></label>
          <input class="form-control" type="text" name="title" value="<?php echo $music_tags['title']; ?>">
        </div>
        <div class="form-group">
          <label>Artist name <label class="star">*</label></label>
          <input class="form-control" type="text" name="artist" value="<?php echo $music_tags['artist']; ?>">
        </div>
        <div class="form-group">
          <label>Album name <label class="star">*</label></label>
          <input class="form-control" type="text" name="album" value="<?php echo $music_tags['album']; ?>">
        </div>
        <div class="form-group">
          <label>Year of the release <label class="star">*</label></label>
          <input class="form-control" type="number" name="rel_year" value="<?php echo $music_tags['year']; ?>">
        </div>
      </div>
      <div class="col-lg-6" id="col2">
        <div class="form-group">
          <label>Genre</label>
          <select class="form-control" name="genre" size="6">
            <option value="alt-rock" selected>Alternative rock</option>
            <option value="breakbeat">Breakbeat</option>
            <option value="downtempo">Downtempo</option>
            <option value="garage-rock">Garage rock</option>
            <option value="jungle">Jungle</option>
            <option value="hardcore">Hardcore</option>
            <option value="house">House</option>
            <option value="metal">Metal</option>
            <option value="new-wave">New wave</option>
            <option value="post-punk">Post-punk</option>
            <option value="prog-rock">Progressive rock</option>
            <option value="shoegaze">Shoegaze</option>
            <option value="techno">Techno</option>
            <option value="trance">Trance</option>
          </select>
        </div>
        <div class="form-group">
          <label>Upload a cover (click on the icon)</label><br>
          <div class="upload-cover-button" id="upload_pic">
            <label class="btn btn-default well well-sm">
              <i class="fa fa-upload" aria-hidden="true"></i>
              <input type="file" id="cover" name="cover" accept="image/jpeg,image/png,image/jpg">
            </label>
          </div>
          <div id="pic_thumbnail"></div>
        </div>
      </div>
      <div class="col-lg-12" id="col3">
        <div class="form-group">
          <label>Description</label>
          <textarea class="form-control" name="description" rows="8"></textarea>
        </div>
        <div style="text-align: center;">
          <button type="submit" name="submit">Submit</button>
        </div>
      </div>
    </section>
  <?php echo form_close(); ?>

这是控制器方法，名为verify：

public function verify() {
  $config = array(
    array(
      'field' => 'title',
      'label' => 'title',
      'rules' => 'required|trim|xss_clean'
    ),
    array(
      'field' => 'artist',
      'label' => 'artist',
      'rules' => 'required|trim|xss_clean'
    ),
    array(
      'field' => 'album',
      'label' => 'album',
      'rules' => 'required|trim|xss_clean'
    ),
    array(
      'field' => 'rel_year',
      'label' => 'release year',
      'rules' => 'required|trim|xss_clean'
    )
  );

  $this->form_validation->set_rules($config);

  if($this->form_validation->run() == FALSE) {
    $result['image'] = 'not set';
    $result['status'] = 'error';
    $result['message'] = $this->form_validation->error_array();
  }
  else {
    // cover upload, not necessary
    if($_FILES['cover']['error'] !== 4) {
      // if we uploaded a cover
      $result['image'] = 'true';
    }
    else {
      // if we didn't upload a cover
      $result['image'] = 'false';
    }
    $result['status'] = 'success';
    $result['message'] = 'Successful uploading.';
  }

  echo json_encode($result);
}

这是 AJAX函数（当然包含$(document).ready(function() {})）：

$('#upload_form').on('submit', function() {
  $.ajax({
    url: '<?php echo base_url('uploads/verify'); ?>',
    type: 'POST',
    dataType: 'json',
    success: function(response) {
      console.log(response);
      console.log(response.message);
    }
  });
});

如果我点击＆＃34;提交＆＃34;，在自动页面重新加载后，我会在空白页面上获得所有正确的数据，例如如果我清除＆＃34;标题＆＃34;字段，我收到以下回复：

{"image":"not set","status":"error","message":{"title":"The title field is required."}}

或者如果我单独留下字段并上传图片：

{"image":"true","status":"success","message":"Successful uploading."}

但问题在于我做的事情并不重要，我总是在控制台中获得相同的行，这是一个问题，因为我想稍后处理这些错误消息。

在console.log(response)：

Object {image: "not set", status: "error", message: Object}

并console.log(response.message)：

Object {title: "The title field is required.", artist: "The artist field is required.", album: "The album field is required.", rel_year: "The release year field is required."}

这基本上是我删除所有输入字段时可能遇到的所有形式错误。看起来验证功能被卡在$this->form_validation->run() == FALSE部分内部，忽略了所有填充的字段。但与此同时，空白页面中的JSON对象和＆＃34; Chrome开发工具 - ＆gt;网络 - ＆gt;预览或响应＆＃34;显示正确的答案。

我尝试使用以下方法以某种方式解决问题：

修改表单错误的方式

除了我上面使用的方法，我尝试了另外两种方法：

$result['message'] = array(
  'title' => form_error('title'),
  'artist' => form_error('artist'),
  'album' => form_error('album'),
  'rel_year' => form_error('rel_year'),
);

还有：

$result['message'] = validation_errors();

这些都不起作用，一切都保持不变。

修改AJAX功能

我只在函数中添加了data属性，以查看是否有任何更改。在这里尝试了两种方式：

data: $('#upload_form').serialize()

和

data: new FormData($(this)[0])

也没有成功......

我一直坐在这里想知道问题究竟是什么，它让我疯狂不知道解决方案:(任何建议？

Codeigniter，AJAX - Chrome中的控制台显示错误的响应

0 个答案: