CODEWITHSUNDEEP
javascriptjqueryjquery-validate
user4584963
user4584963

Reputation: 2533

jquery validate - Possible to change submitted field value?

I have a custom method

$.validator.addMethod("lettersandspaces", function(value, element) {
    var value = this.elementValue(element).replace(/\s+/g, ' ').trim();
    return this.optional(element) || /^[a-zA-Z][a-zA-Z\s]*$/i.test(value);
}, 'Your name may only contain letters');

Here I am trimming whitespace and replacing any repeating whitespaces with only one. I am then validating to make sure there are only letters and spaces.

Is it possible to make it so the trimmed value is submitted with the form instead of what the user entered?

Upvotes: 2

Views: 3596

Answers (2)

Phan Kieu Hung
Phan Kieu Hung

Reputation: 133

In validation form by jquery. If you want change value input name before validate. Let try:

$('#form').validate({
    rules: {
        'name': {
            normalizer: function(){
                return $('#name').val().(/\s+/g, ' ').trim();
            }
        }
    }    
})

Upvotes: 0

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

Use the submitHandler and you can make any action before submiting the form ,(form.submit())

See beleow a working snippet 

$.validator.addMethod("lettersandspaces", function(value, element) {
    var value = this.elementValue(element).replace(/\s+/g, ' ').trim();
    return this.optional(element) || /^[a-zA-Z][a-zA-Z\s]*$/i.test(value);
}, 'Your name may only contain letters');

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "name": {
                required: true,
                minlength: 5,
                lettersandspaces: true
            },
            "age": {
                required: true,
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "age": {
                required: "Please, enter your age",
            }
        },
        submitHandler: function (form) { // for demo
            var newName  = $("#name").val().replace(/\s+/g, ' ').trim()
            $("#name").val(newName);
            $(form).valid();
            alert("Name = '"+newName+"'");
            
            // comment return and uncomment form.submit(
            return false;  //form.submit();
        }
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

<form id="form" method="post" action="#">
    <label for="name">Name :</label>
    <input type="text" name="name" id="name" /><br><br>
    <label for="age">Age :&nbsp;&nbsp;&nbsp;</label>
    <input type="age" name="age" id="age" /><br><br>
    <button type="submit">Submit</button>
</form>

Upvotes: 4

Related Questions