JQuery Validator Showing Remote Response

Question

I am trying to show the response of the remote rule, possibly in the same place as the other responses. What I want to show is the response the PHP is sending me. I can easily show it in the console.log, but don't know how to show the result underneath the field

$("#conversionForm").validate({

    // Specify the validation rules
    ignore:[],
    rules: {
        "URL[]": {
            required: true,
            minlength: 3,
            pattern: yt,
            remote:  {url:"checkdescription.php",
                type: "post",
                beforeSend: function () {

                },complete: function (response) {
                    console.log(response.responseText); //This is what I would like to show

                   $(this).closest('.form-group').text(response.responseText) // This doesnt work
                },
                onkeyup: false
            }


        }

    },
    messages: {
        "URL[]": {
            required: "<div style='margin:3.4px 0 0 0'>This field is required</div>",
            pattern: "<div style='margin:3.4px 0 0 0'>Enter a valid URL  of the type https://www.youtube.com/watch?v=ZDO4I5aT0hg</div>",
            minlength:"<div style='margin:3.4px 0 0 0'>Enter a valid URL</div>",
            remote:<some invalid message dependent on the php response, too> //help here too
        },
        success: function(e) {

        }
    },

});

Basically I want to customize both error and success messages depending on the php response; if i can only send true or false back, then what other method do you think should i use?

Thank you

Edit: HTML

<form role="form" action="index.php" method="post" id="conversionForm">

    <div id="to-append">

        <div class="row" id="input-0">

            <div class="col-xs-11 " >

                <input type="text" class="form-control" id="youtubeURL-0" name="URL[]" placeholder="Enter your URL here">

            </div>

        </div>

    </div>

    <div class="row">

        <div class="top-buffer col-xs-12" >

            <button type="submit" id="btn-submit" name="submit" >Submit</button>

        </div>

    </div>

</form>

After this I add more divs exactly like .row #input-0 with jquery (#input-1, #input-2, etc) (appending them to #to-append). For each input, the remote php returns a different number, i want to show that number somwhere near the input field. Basically, show the validation remote answer

i cleaned a little your code https://jsfiddle.net/geradrum/kj4h9vzn/ You don't need to put the tags on every message, you could just create a empty div and put the messages there. If your `console.log(response.responseText);` works fine then the `$(this).closest('.form-group').text(response.responseText)` wont work because you are using `this` and you're not gonna get the element what you want, maybe change `this` by the selector of your form where `.form-group` is. — Gerardo, Feb 24 '16 at 05:02
Put a `console.log(this)` and `console.log(this).closest('.form-group')` after `$(this).closest('.form-group').text(response.responseText)` and check what returns — Gerardo, Feb 24 '16 at 05:06
@Gerardo, console.log(this) and console.log(this).closest('.form-group') return Object {url: "checkdescription.php", type: "POST", isLocal: false, global: true, processData: true…} ----- $(this).closest('.form-group').text(response.responseText) Uncaught TypeError: Cannot read property 'closest' of undefined — user3808307, Feb 24 '16 at 05:30
What do you mean by the selector of your form where .form-group is. — user3808307, Feb 24 '16 at 05:35
Create a new div or use an existing one where you want the response message and use some id for that div. Replace `$(this).closest('.form-group').text(response.responseText) ` by `$("#hereyourdivid").html(response.responseText)` now ut should work — Gerardo, Feb 24 '16 at 06:26
To get an error message that depends on PHP, simply `echo` a JSON encoded string. `echo json_encode("my custom error")` Otherwise `echo "true"` or `echo "false"` to pass or fail validation respectively. See docs: http://jqueryvalidation.org/remote-method/ — Sparky, Feb 24 '16 at 15:45
Sparky, I can get the response, i was asking how to display it where the error validation messages show — user3808307, Feb 24 '16 at 17:25
@user3808307 Did it work? What Sparky says works too, you only need a function that handles that response like `success: function(response){if(reponse=="success"){/*Success message or function*/}else{/*Error message or function*/}}` — Gerardo, Feb 24 '16 at 17:27

JQuery Validator Showing Remote Response

0 Answers0