来自 PHP 和 HTML 表单的 Javascript/jquery 多重警报

Question

如何在 1 个表单中发出多个警报或验证？

有一个PHP数组选项用于生日（日期、月份、年份），工作的数组选择，性别的单选按钮，激情的复选框（可以选择超过1个但不能为空）并以一种形式上传文件.

可以用一个脚本完成吗？

如何对每个值进行专属提示信息，并关注空值或未选中值？

我的表格：

<form action="" method="post">
  <table width="589" border="1" align="center">
    <tr>
      <td colspan="3">INPUT DATA</td>
    </tr>
    <tr style="text-align: left">
      <td width="128">NAME</td>
      <td width="3">:</td>
      <td width="394"><input type="text" name="name" id="name"></td>
    </tr>
    <tr style="text-align: left">
      <td>BIRTHDAY</td>
      <td>:</td>
      <td><?php
echo "<select name='date' id='date'>";
echo "<option selected='selected'>DATE</option>";
    for($a=1; $a<=31; $a+=1)
{
echo"<option value=$a> $a </option>";
}
echo "</select>";
echo "<select name='month' id='month'>";
echo "<option selected='selected'>MONTH</option>";
$month=array(1=>"Januari","Februari","Maret","April","Mei","Juni","July","Agustus","September","Oktober","November","Desember");
for($months=1; $months<=12; $months++)
echo "<option value='$months'>$month[$months]</option>";
echo "</select>";
$now=date('Y');
echo "<select id='year' name='year'>";
echo "<option selected='selected'>YEAR</option>";
    for ($a=1980;$a<=$now;$a++)
{
echo "<option value='$a'>$a</option>";
}
echo "</select>";

?>
</td>
    </tr>
    <tr style="text-align: left">
      <td>MAJOR</td>
      <td>:</td>
      <td> <select name="major" id="major">
      echo "<option selected>--SELECT MAJOR--</option>";

    <?php
    $major=array("INFORMATION SYSTEM"=>"IS","COMPUTER ENGINERING"=>"CE");
    foreach($major as $j=>$value)
    {echo"<option value='".$value."'>".$j."</option>";
    }
    ?>

</select></td>

    </tr>
    <tr style="text-align: left">
      <td>JOB</td>
      <td>:</td>
      <td><select name="job" id="job">
      echo "<option selected>--SELECT JOB--</option>";

      <?php
      $choise = array('Actuarial analyst','Business analyst','IT consultant','Network engineer');
      for ($job=0;$job<=3;$job++)
      {
      echo "<option value='".$choise[$job]."'>
            ".$choise[$job]."</option>";
      }
      ?>
    </select></td>
    </tr>
    <tr style="text-align: left">
      <td>SEX</td>
      <td>:</td>
      <td><input type="radio" name="sex" id="sex" value="MALE">
      <label for="radio">MALE 
        <input type="radio" name="sex" id="sex2" value="FEMALE">
      FEMALE</label></td>
    </tr>
    <tr style="text-align: left">
      <td>PASSION</td>
      <td>:</td>
      <td><input type="checkbox" name="pass[]" value="WRITING">Writing
     <input type="checkbox" name="pass[]" value="NETWORKING">Networking
     <input type="checkbox" name="pass[]" value="PROGRAMMING">Programming
     <input type="checkbox" name="pass[]" value="ENGINERING">Enginering
     <input type="checkbox" name="pass[]" value="ETC">Etc</td>
    </tr>
    <tr style="text-align: left">
      <td>FOTO</td>
      <td>:</td>
      <td><input  type="file" name="photo"  id="photo"></td>
    </tr>
    <tr>
      <td colspan="3"><input type="submit" name="button" id="submit" value="SAVE"></td>
    </tr>
  </table>
  <label for="name"></label>
</form>

Answer 1

您可以通过以下链接了解有关验证表单的更多信息：Form validation

Answer 2

您需要在表单中添加验证器脚本。这是一个简单的形式，它在 sn-p 中不起作用，但您可以在 codepen 中看到它的工作原理@

您只需在必填字段末尾添加required

+function ($) {
  'use strict';

  // VALIDATOR CLASS DEFINITION
  // ==========================

  var Validator = function (element, options) {
    this.$element = $(element)
    this.options  = options

    options.errors = $.extend({}, Validator.DEFAULTS.errors, options.errors)

    for (var custom in options.custom) {
      if (!options.errors[custom]) throw new Error('Missing default error message for custom validator: ' + custom)
    }

    $.extend(Validator.VALIDATORS, options.custom)

    this.$element.attr('novalidate', true) // disable automatic native validation
    this.toggleSubmit()

    this.$element.on('input.bs.validator change.bs.validator focusout.bs.validator', $.proxy(this.validateInput, this))
    this.$element.on('submit.bs.validator', $.proxy(this.onSubmit, this))

    this.$element.find('[data-match]').each(function () {
      var $this  = $(this)
      var target = $this.data('match')

      $(target).on('input.bs.validator', function (e) {
        $this.val() && $this.trigger('input.bs.validator')
      })
    })
  }

  Validator.INPUT_SELECTOR = ':input:not([type="submit"], button):enabled:visible'

  Validator.DEFAULTS = {
    delay: 500,
    html: false,
    disable: true,
    custom: {},
    errors: {
      match: 'Does not match',
      minlength: 'Not long enough'
    },
    feedback: {
      success: 'glyphicon-ok',
      error: 'glyphicon-remove'
    }
  }

  Validator.VALIDATORS = {
    'native': function ($el) {
      var el = $el[0]
      return el.checkValidity ? el.checkValidity() : true
    },
    'match': function ($el) {
      var target = $el.data('match')
      return !$el.val() || $el.val() === $(target).val()
    },
    'minlength': function ($el) {
      var minlength = $el.data('minlength')
      return !$el.val() || $el.val().length >= minlength
    }
  }

  Validator.prototype.validateInput = function (e) {
    var $el        = $(e.target)
    var prevErrors = $el.data('bs.validator.errors')
    var errors

    if ($el.is('[type="radio"]')) $el = this.$element.find('input[name="' + $el.attr('name') + '"]')

    this.$element.trigger(e = $.Event('validate.bs.validator', {relatedTarget: $el[0]}))

    if (e.isDefaultPrevented()) return

    var self = this

    this.runValidators($el).done(function (errors) {
      $el.data('bs.validator.errors', errors)

      errors.length ? self.showErrors($el) : self.clearErrors($el)

      if (!prevErrors || errors.toString() !== prevErrors.toString()) {
        e = errors.length
          ? $.Event('invalid.bs.validator', {relatedTarget: $el[0], detail: errors})
          : $.Event('valid.bs.validator', {relatedTarget: $el[0], detail: prevErrors})

        self.$element.trigger(e)
      }

      self.toggleSubmit()

      self.$element.trigger($.Event('validated.bs.validator', {relatedTarget: $el[0]}))
    })
  }


  Validator.prototype.runValidators = function ($el) {
    var errors   = []
    var deferred = $.Deferred()
    var options  = this.options

    $el.data('bs.validator.deferred') && $el.data('bs.validator.deferred').reject()
    $el.data('bs.validator.deferred', deferred)

    function getErrorMessage(key) {
      return $el.data(key + '-error')
        || $el.data('error')
        || key == 'native' && $el[0].validationMessage
        || options.errors[key]
    }

    $.each(Validator.VALIDATORS, $.proxy(function (key, validator) {
      if (($el.data(key) || key == 'native') && !validator.call(this, $el)) {
        var error = getErrorMessage(key)
        !~errors.indexOf(error) && errors.push(error)
      }
    }, this))

    if (!errors.length && $el.val() && $el.data('remote')) {
      this.defer($el, function () {
        var data = {}
        data[$el.attr('name')] = $el.val()
        $.get($el.data('remote'), data)
          .fail(function (jqXHR, textStatus, error) { errors.push(getErrorMessage('remote') || error) })
          .always(function () { deferred.resolve(errors)})
      })
    } else deferred.resolve(errors)

    return deferred.promise()
  }

  Validator.prototype.validate = function () {
    var delay = this.options.delay

    this.options.delay = 0
    this.$element.find(Validator.INPUT_SELECTOR).trigger('input.bs.validator')
    this.options.delay = delay

    return this
  }

  Validator.prototype.showErrors = function ($el) {
    var method = this.options.html ? 'html' : 'text'

    this.defer($el, function () {
      var $group = $el.closest('.form-group')
      var $block = $group.find('.help-block.with-errors')
      var $feedback = $group.find('.form-control-feedback')
      var errors = $el.data('bs.validator.errors')

      if (!errors.length) return

      errors = $('<ul/>')
        .addClass('list-unstyled')
        .append($.map(errors, function (error) { return $('<li/>')[method](error) }))

      $block.data('bs.validator.originalContent') === undefined && $block.data('bs.validator.originalContent', $block.html())
      $block.empty().append(errors)
      $group.addClass('has-error')

      $feedback.length
        && $feedback.removeClass(this.options.feedback.success)
        && $feedback.addClass(this.options.feedback.error)
        && $group.removeClass('has-success')
    })
  }

  Validator.prototype.clearErrors = function ($el) {
    var $group = $el.closest('.form-group')
    var $block = $group.find('.help-block.with-errors')
    var $feedback = $group.find('.form-control-feedback')

    $block.html($block.data('bs.validator.originalContent'))
    $group.removeClass('has-error')

    $feedback.length
      && $feedback.removeClass(this.options.feedback.error)
      && $feedback.addClass(this.options.feedback.success)
      && $group.addClass('has-success')
  }

  Validator.prototype.hasErrors = function () {
    function fieldErrors() {
      return !!($(this).data('bs.validator.errors') || []).length
    }

    return !!this.$element.find(Validator.INPUT_SELECTOR).filter(fieldErrors).length
  }

  Validator.prototype.isIncomplete = function () {
    function fieldIncomplete() {
      return this.type === 'checkbox' ? !this.checked                                   :
             this.type === 'radio'    ? !$('[name="' + this.name + '"]:checked').length :
                                        $.trim(this.value) === ''
    }

    return !!this.$element.find(Validator.INPUT_SELECTOR).filter('[required]').filter(fieldIncomplete).length
  }

  Validator.prototype.onSubmit = function (e) {
    this.validate()
    if (this.isIncomplete() || this.hasErrors()) e.preventDefault()
  }

  Validator.prototype.toggleSubmit = function () {
    if(!this.options.disable) return

    var $btn = $('button[type="submit"], input[type="submit"]')
      .filter('[form="' + this.$element.attr('id') + '"]')
      .add(this.$element.find('input[type="submit"], button[type="submit"]'))

    $btn.toggleClass('disabled', this.isIncomplete() || this.hasErrors())
  }

  Validator.prototype.defer = function ($el, callback) {
    callback = $.proxy(callback, this)
    if (!this.options.delay) return callback()
    window.clearTimeout($el.data('bs.validator.timeout'))
    $el.data('bs.validator.timeout', window.setTimeout(callback, this.options.delay))
  }

  Validator.prototype.destroy = function () {
    this.$element
      .removeAttr('novalidate')
      .removeData('bs.validator')
      .off('.bs.validator')

    this.$element.find(Validator.INPUT_SELECTOR)
      .off('.bs.validator')
      .removeData(['bs.validator.errors', 'bs.validator.deferred'])
      .each(function () {
        var $this = $(this)
        var timeout = $this.data('bs.validator.timeout')
        window.clearTimeout(timeout) && $this.removeData('bs.validator.timeout')
      })

    this.$element.find('.help-block.with-errors').each(function () {
      var $this = $(this)
      var originalContent = $this.data('bs.validator.originalContent')

      $this
        .removeData('bs.validator.originalContent')
        .html(originalContent)
    })

    this.$element.find('input[type="submit"], button[type="submit"]').removeClass('disabled')

    this.$element.find('.has-error').removeClass('has-error')

    return this
  }

  // VALIDATOR PLUGIN DEFINITION
  // ===========================


  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var options = $.extend({}, Validator.DEFAULTS, $this.data(), typeof option == 'object' && option)
      var data    = $this.data('bs.validator')

      if (!data && option == 'destroy') return
      if (!data) $this.data('bs.validator', (data = new Validator(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.validator

  $.fn.validator             = Plugin
  $.fn.validator.Constructor = Validator


  // VALIDATOR NO CONFLICT
  // =====================

  $.fn.validator.noConflict = function () {
    $.fn.validator = old
    return this
  }


  // VALIDATOR DATA-API
  // ==================

  $(window).on('load', function () {
    $('form[data-toggle="validator"]').each(function () {
      var $form = $(this)
      Plugin.call($form, $form.data())
    })
  })

}(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form data-toggle="validator" action="contact_script" method="post" role="form">
          <div class="form-group">
            <input name="name" type="text" class="form-control input-lg" placeholder="Your Name" required>
          </div>
          <div class="form-group">
            <input name="email" type="email" class="form-control input-lg" placeholder="E-mail" required>
          </div>
          <div class="form-group">
            <input name="phone" type="text" class="form-control input-lg" placeholder="Contact No." required>
          </div>
          <div class="form-group">
            <input name="subject" type="text" class="form-control input-lg" placeholder="Subject" required>
          </div>
          <div class="form-group">
            <textarea name="message" class="form-control input-lg" rows="5" placeholder="Message"></textarea>
          </div>
          <button type="submit" class="btn wow bounceInRight" data-wow-delay="0.8s">Send</button>
        </form>