CODEWITHSUNDEEP
knockout-validation
ali
ali

Reputation: 75

Validate input field on submit

Im tryinf to validate this input field when i click on Submit button. What happens is when I click on the submit button and the textbox is empty it alert thank you,however it should alert Please check your submission

Html

<div id="newTest">
    <fieldset>
        <div class="row">
            <label>Last name:</label>
            <input type="text" data-bind="value: lastName" />
        </div>

    </fieldset>

    <fieldset>
        <button type="button" data-bind='click: submit'>Submit</button>

    </fieldset>
</div>

Javascript

<script src="~/Scripts/knockout-3.5.0.js"></script>
<script src="~/Scripts/knockout.validation.min.js"></script>
<script>

    var viewModel = function () {

        ko.validation.rules.pattern.message = 'Invalid.';

        ko.validation.init({
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: true,
            parseInputAttributes: true,
            messageTemplate: null
        }, true);

        var self = this;
        self.lastName = ko.observable().extend({ required: true }),

            self.submit = function () {
                if (viewModel.errors().length === 0) {
                    alert('Thank you.');
                }
                else {
                    alert('Please check your submission.');
                    viewModel.errors.showAllMessages();
                }
            };

    };

    viewModel.errors = ko.validation.group(viewModel);
    var viewModel2 = new viewModel();

    ko.applyBindings(viewModel2, document.getElementById("newTest"));

</script>

Upvotes: 0

Views: 79

Answers (1)

Boatmarker
Boatmarker

Reputation: 196

Since you are initializing viewModel2 as new viewModel(), these two lines of code:

viewModel.errors = ko.validation.group(viewModel);
var viewModel2 = new viewModel();

should be:

var viewModel2 = new viewModel();
viewModel.errors = ko.validation.group(viewModel2);

It's also unclear to me why you wrote this the way you did. It could be simpler IMO. Here's an example (JSFiddle: https://jsfiddle.net/vwuazfg0/):

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.init({
  registerExtenders: true,
  messagesOnModified: true,
  insertMessages: true,
  parseInputAttributes: true,
  messageTemplate: null
}, true);

var viewModel = {
    lastName : ko.observable().extend({ required: true }),
  submit : function () {
    if (viewModel.errors().length === 0) {
      alert('Thank you.');
    }
    else {
      alert('Please check your submission.');
      viewModel.errors.showAllMessages();
    }
  }
};

viewModel.errors = ko.validation.group(viewModel);

ko.applyBindings(viewModel, document.getElementById("newTest"));

Upvotes: 1

Related Questions