I have read most of questions that have been answered about this issue but till now can't get it to work, for 2 days now, I have this form
<form id="mr_project_form" class="post" role="form">
<label class="fre-field-title" for="fre-project-title">Your project title</label>
<input class="input-item text-field" id="fre-project-title" type="text" name="post_title" placeholder="Add more than 15 characters"/>
<!--Submit button-->
</form>
And i can apply the validator on the input element here,like this
$( "#mr_project_form" ).validate();
Then after an AJAX call an input injected by AJAX response,So the form would be something like this
<form id="mr_project_form" class="post" role="form">
<label class="fre-field-title" for="fre-project-title">Your project title</label>
<input class="input-item text-field" id="fre-project-title" type="text" name="post_title" placeholder="Add more than 15 characters"/>
<!--Inserted input-->
<input class="input-item text-field" id="inserted_input" type="text" name="inserted_input"/>
<!--Submit button-->
</form>
And as mentioned in #22287410 and #18022224, I should add the rule after the element been added, so in the ajax success i added the rule like this
$.ajax({
url: mr_ajax_url,
type: "POST",
data: dataString,
success: function (response) {
$("#" + insertLcation).html(response);
$('#inserted_input').rules('add', { digit: true, });
},
});
But it can't be validated, and i get this error on pageload
TypeError: t.validator.methods[a] is undefined; can't access its "call" property
TypeError: s is undefined; can't access its "form" property