javascript - Bootstrap Validator für bestimmtes Feld deaktivieren

Ich bin neu bei Bootstrap Validator und jQuery im Allgemeinen und versuche, etwas zu erreichen.

Ich habe ein Formular mit Feldern z. B.

<div class="form-group" id="price_container">
    <label for="price">Asking Price</label><input class="form-control" style="width: 50%;" type="text" id="price" name="price" >
</div>

<div class="form-group">
    <label for="title">Title</label>
    <input class= "form-control" type="text" name="title">
</div>

und ich habe es zur Überprüfung ok mit:

 $('#multiform')
    .find('[name="list_type"]')
        .change(function(e) {
           $('#multiform').bootstrapValidator('revalidateField', 'price');
        })
        .end()
    .bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            required: 'fa fa-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            price: {
                validators: {
                   notEmpty: {
                      message: 'The price is required and cannot be empty'
                   },
                   integer: {
                      message: 'You can only enter an integer'
                   }, 
                   regexp: {
                      regexp: /^[0-9]+$/,
                      message: 'The price can only consist of numbers'
                   }      
                }
            }
        }
    });

Wenn jedoch eine bestimmte Aktion stattfindet, möchte ich die Validierung deaktivieren (damit ich Bilder auf den Server hochladen kann). Ich habe mir die Dokumentation hier angesehen: http://bootstrapvalidator.com/examples/enable-validator/

und habe das bekommen:

$(document).on("click", ".btn-danger", function () {
      $('#multiform').bootstrapValidator().enableFieldValidators('price', false);
}

aber das funktioniert einfach nicht. Ich weiß, es sollte relativ einfach sein, aber als Neuling kann ich es nicht herausfinden.

Kann jemand helfen?

Danke

Antwort #1

Hier ist eine funktionierende Version: http://jsfiddle.net/silviagreen/ym48cfxd/

   $(document).on("click", ".btn-danger", function () {
        var bootstrapValidator = $('#multiform').data('bootstrapValidator');
        bootstrapValidator.enableFieldValidators('price', false);
   });

Schau dir das JS-Fiddle an, um zu wissen, welche Versionen von jQuery, Bootstrap und bootstrapValidator ich verwendet habe, um es zum Laufen zu bringen.

Ich weiß, dass dies ein alter Beitrag ist, aber vielleicht kann dies für andere nützlich sein.

Antwort #2

Versuche das:

$('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', true);

Arbeitsbeispiel unten:

$(document).ready(function() {
    $('#surveyForm').find('[name="list_type"]')
        .change(function(e) {
           $('#surveyForm').bootstrapValidator('revalidateField', 'price');
        })
        .end()
    .bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            required: 'fa fa-asterisk',
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            price: {
                validators: {
                   notEmpty: {
                      message: 'The price is required and cannot be empty'
                   },
                   integer: {
                      message: 'You can only enter an integer'
                   }, 
                   regexp: {
                      regexp: /^[0-9]+$/,
                      message: 'The price can only consist of numbers'
                   }      
                }
            }
        }
    });
    
    $(document).on("change", "#inlineCheckbox1", function () {
      if($(this).is(":checked")) {
        $('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', true);
      } else {
        $('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', false);
      }
    });
    
    $("#surveyForm").submit(function(e){
      alert("Validation completed");
      return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form id="surveyForm" method="post" class="form-horizontal">
  <div class="form-group" id="price_container">
    <label class="col-sm-3 control-label" for="price">Asking Price</label>
    <div class="col-sm-5">
      <input class="form-control" style="width: 50%;" type="text" id="price" name="price" >
    </div>
  </div>
  <div class="form-group">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" checked>
      <label class="form-check-label" for="inlineCheckbox1">Validate</label>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Validate</button>
  </div>
</form>

Oder sehen Sie das Beispiel im folgenden Link: http://bootstrapvalidator.votintsev.ru/examples/enable-validator/