2016-07-09 8 views
1

wie Form für wordcount und alphanumerische Werte validieren mit Bootstrap

$(document).ready(function() { 
 
    $('#publish_creation').bootstrapValidator({ 
 
    message: 'This value is not valid', 
 
    //ignore: ":hidden:not(textarea)", 
 
    feedbackIcons: { 
 
     valid: 'glyphicon glyphicon-ok', 
 
     invalid: 'glyphicon glyphicon-remove', 
 
     validating: 'glyphicon glyphicon-refresh' 
 
    }, 
 
    fields: { 
 
     policyta: { 
 
     group: '.title', 
 
     validators: { 
 
      notEmpty: { 
 
      message: 'Textarea cannot be empty' 
 
      }, 
 
      stringLength: { 
 
      max: 50, 
 
      message: 'Maximum 50 Characters Required' 
 
      } 
 
regexp: { 
 
        regexp: /^[a-zA-Z0-9_\.]+$/, 
 
        message: 'The title can only consist of alphabetical, number, dot and underscore' 
 
       } 
 
     } 
 
     } 
 
    } 
 
    }); 
 
    $('#title').wysihtml5({ 
 
    events: { 
 
     load: function() { 
 
     $('#title').addClass('textnothide'); 
 
     }, 
 
     change: function() { 
 
     $('#publish_creation').bootstrapValidator('revalidateField', 'title'); 
 
     } 
 
    } 
 
    }); 
 
});
<link href="https://cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/wysihtml5/0.3.0/wysihtml5.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> 
 

 

 

 
<form role="form" name="#publish_creation" action="#" method="post" enctype="multipart/form-data"> 
 

 
    <div class="form-group"> 
 
    <div class="title"> 
 
     <input placeholder="Title: Numb Cover" name="title" id="title" type="text"> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <select class="form-control" id="my_select" name="art_form_id"> 
 
     <option value="1">Music</option> 
 
     <option value="2">Photography</option> 
 
     <option value="3">Painting</option> 
 
     <option value="4">Fashion</option> 
 
     <option value="5">Modelling</option> 
 
    </select> 
 

 
    </div> 
 

 
    <input type="submit" value="Publish" name="upload" class="btn th-btn-pri1blue"> 
 

 
</form>

i das Formular bestätigen müssen. aber ich bekomme Fehler. Und ich konnte es nicht herausfinden. Ich habe den Code von einer anderen Stackoverflow-Frage verwendet. How to validate wysiwyg editor using bootstrap validation Ich versuche, den Code für mein Formular zu verwenden. Und ich habe alle notwendigen Links für die Website zur Verfügung gestellt.

Antwort

0

HTML5 übernimmt die gesamte Validierungsarbeit für Sie. Versuchen Sie diese

<div class="title"> 
    <input size="50" placeholder="Title: Numb Cover" name="title" id="title" type="text" required maxlength="50" pattern="[a-zA-Z0-9._\s]+" title="This field can contain only alpha numeric characters.."> 
</div> 
Verwandte Themen