PHPとHTMLフォームからのJavascript/jqueryの複数の警告

1つのフォームで複数の警告または検証を行うにはどうすればよいですか？PHPとHTMLフォームからのJavascript/jqueryの複数の警告

誕生日（日付、月、配列）の配列、仕事の配列の選択、性別のラジオボタン、情熱のチェックボックス（1つ以上を選択できますが空ではない）形。

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>

出典

2016-12-21 Night Mare

の最後にrequiredを追加する必要がありますこれには多くの方法がありますが、何を試しましたか？ – pmahomme

あなたのフォームにバリスクリプトを追加する必要があります。これは、単純な形で、それはスニペットで動作していないが、あなたがこのcodepen

で働いて、それを見ることができる、あなただけの必要なフィールドがあり

+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>

出典

2016-12-21 17:24:46 ab29007

PHPとHTMLフォームからのJavascript/jqueryの複数の警告

関連する問題