2

This is the first time I use bootstrap for validate a form fields, I'm learning how to do it by following a
contact form validation example in the following link.

Fortunately after some time, I've got the example in the link provided, running perfectly.

Now I wonder how can I validate a "name" field for containing only letters.

Based on the validators:{} object in the code snippet below...

$(document).ready(function(){
    $('#form_id').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{
            first_name:{
                validators:{
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            }
        }
    })
});

is there something similar in bootstrap that allows to make such validation?

Sandoval0992
  • 1,307
  • 3
  • 18
  • 24
  • does my answer work? – hasan Jun 10 '17 at 16:43
  • @hasan, thanks for your answer, I suppose it's a good answer. I tried your code at https://codepen.io/hasanB/pen/gRrOQm and it works fine, it's exactly what I want to do. However in my project it doesn't work the same. Let me find out what the problem is and I'll let you know. – Sandoval0992 Jun 10 '17 at 16:50

1 Answers1

2

you can use this. works this codepen I have added callback for just firstname field and you can also use callback for other custom needs in bootstrap validation.

Detail reference : http://formvalidation.io/validators/callback/

function isValid(value)
{
  var fieldNum = /^[a-z]+$/i;

  if ((value.match(fieldNum))) {
      return true
  }
  else
  {
      return false
  }

}

message fires if user enter something out of letter.

first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    },
                    callback: {
                        message: 'please enter only letters',
                        callback: function(value, validator, $field) {
                            if (!isValid(value)) {
                              return {
                                valid: false,
                              };
                            }
                            else
                            {
                              return {
                                valid: true,
                              };    
                            }

                        }
                    }
                }

       }
hasan
  • 3,484
  • 1
  • 16
  • 23
  • I'm getting this error in the browser's console. http://www.heypasteit.com/clip/0IIMGO – Sandoval0992 Jun 10 '17 at 17:20
  • I actually copied your code from the online editor. I'm sorry, don't know if I have to modify something else. Well, I think I should start learning javascript or jquery before using bootstrap. Could you please tell me, do I have to modify something? – Sandoval0992 Jun 10 '17 at 18:46
  • just copying code from editor to your project can be problem you should edit code according to your need – hasan Jun 10 '17 at 18:48
  • can you create codepen or jsfiddle with your code, then maybe i can detect error – hasan Jun 10 '17 at 18:52
  • https://codepen.io/sandoval0992/pen/qjZbmN look at this, it's exactly what I've got in my project, thanks for your help. – Sandoval0992 Jun 10 '17 at 20:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146333/discussion-between-hasan-and-100pixels). – hasan Jun 10 '17 at 20:24