Requiring a field in jQuery Validation

Question

I have a form that is validated by the jQuery validation plugin. The form contains one field (articleTitle) and a submit button. The articleTitle field is where the user can enter a title and then submit. Here are the requirements:

$(".article_form").validate({
  errorElement: 'div',
  rules: {
    articleTitle: {
      required: true,
      minlength: 10
    },
  },

  messages: {
    articleTitle: {
      required: "You have to provide a title for your article!",
      minlength: "Your title must be at least 10 characters long"
    },

  },
});

This validation is working, but when the user enters 10 spaces it is thinking it's valid. When in reality, if the user enters 10 spaces it should be considered blank still. How can I make it so that if the user enters only spaces it will be considered blank and tell the user that this field is required?

Notice: The field may contain spaces. Just not the all spaces.

Can use submit one character other than space and nine space characters? What is expected input? — guest271314, Aug 18 '16 at 03:27
@guest271314 Preferably, I'd like for there to be 10 characters other than a space. Since it's a title, there should not be only one character and 9 spaces — user2896120, Aug 18 '16 at 03:32
There are 11 different solutions & workarounds posted under [this same question](http://stackoverflow.com/q/1827483/594235). Otherwise, if you feel there is a bug with the plugin, post as such on the [jQuery Validate GitHub page](https://github.com/jzaefferer/jquery-validation). Thanks. — Sparky, Aug 18 '16 at 03:52
@Sparky That question that you have linked is calling for the deletion of white space completely, my question is asking for detecting when a field is blank or not. Blank is in nothing at all in the field or the field only contains white space. — user2896120, Aug 18 '16 at 03:54
If you study the code in the answers, it does not necessarily mean that all spaces are removed. [jQuery `.trim()` only removes *"the whitespace from the **beginning and end** of a string"*](https://api.jquery.com/jQuery.trim/), not from the middle. — Sparky, Aug 18 '16 at 03:57
@Sparky The answer that is marked as accepted does not let me enter any spaces at all — user2896120, Aug 18 '16 at 03:58
Learning from the duplicate question, create your own method using `.trim()` ... http://jsfiddle.net/jecf8mqj/ — Sparky, Aug 18 '16 at 04:08
@Sparky The best solution I found was this: `$('#articleTitle').change(function() { $(this).val($(this).val().trim()); });` It does the trimming correctly. The only problem with this is how do I scale it? Is there a way to make something like this by adding a validator method? I have tried your jsfiddle, but this trimming code is the best one because it actually trims extra spaces. — user2896120, Aug 18 '16 at 04:14
To check whether a string contains only whitespace, simply convert it to a boolean: — Don P, Aug 31 '16 at 20:27
var title = " \t\n \n "; alert( !!title ); title = "The Title"; alert( !!title ); Works for any whitespace, even tab characters. — Don P, Aug 31 '16 at 20:32

Jecoms · Answer 1 · 2016-08-18T03:55:51.840

1

Add a depends function that trims the spaces. It will trim the input and then, since it's required, will reject the blank input.

onkeyup: false, // this prevents validation on keyup for all fields
...
rules: {
    articleTitle: {
        required: {
            depends: function() {
                $(this).val($.trim($(this).val()));
                return true;
            },
        },   
        minlength: 10
    },
    ...
},
...

edited Aug 18 '16 at 03:55

answered Aug 18 '16 at 03:10

Jecoms

2,558
4
20
31

With this, it's not letting me enter any spaces. The user should have the ability to enter spaces, it's just that I don't want them to enter only blank spaces and make the field empty. – user2896120 Aug 18 '16 at 03:17
You can add `onkeyup:false` to prevent the auto-validation trim. – Jecoms Aug 18 '16 at 03:28
`onkeyup: false` simply disables the `keyup` validation trigger. – Sparky Aug 18 '16 at 03:30
Your premise is nonsense. You cannot disable `onkeyup` for a single field by attaching another instance of `.validate()` to it. See: http://jsfiddle.net/5qkqggL2/ – Sparky Aug 18 '16 at 03:35
@Sparky How is this a possible duplicate of that question? That question does not want white space at all. I am not asking for the removing of white space, but the detection of a blank field that only contains white space. The user is inputting a title and a title can contain blank spaces. For example, "Hello World" could be a title, but " " is not a title as this is technically blank. – user2896120 Aug 18 '16 at 03:45

Requiring a field in jQuery Validation

1 Answers1