how to validate form for wordcount and alphanumeric values using bootstrap

Question

$(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 need to validate the form. but i am getting error. And I couldnt figure it out. I have used the code from another stackoverflow question. How to validate wysiwyg editor using bootstrap validation I am trying to use the code for my form. ANd i have provided all the link necessary for the site.

T.Shah · Accepted Answer · 2016-07-09 08:22:41Z

1

HTML5 will do all the validation work for you. Try this

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

answered Jul 9, 2016 at 8:22

T.Shah

2,7661 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to validate form for wordcount and alphanumeric values using bootstrap

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related