Как проверить HTML-теги, а затем добавить ошибку в JQuery Validation

0

Я пытаюсь проверить свою форму с помощью плагина jQuery Validation.

Вот код

    $(document).ready(function(){
        var productsForm=$('#products-form');
     productsForm.validate({
            //debug:true,
          invalidHandler: function(event, validator) {
    // 'this' refers to the form
    var errors = validator.numberOfInvalids();
    if (errors) {
    var message = errors == 1
    ? 'You missed 1 field. It has been highlighted'
    : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
    $("div.error").show();
    } else {
    $("div.error").hide();
    }
    },
         rules:{
             productName: {
                 required: true,
                 minlength:2,

//here i tried to create a function

                 onfocusout: function(element){
                 var myValue=$(element).val();
                 if(myValue.match(/[<>$]/))
                 {
                     alert('Please enter the Name without any tags.');
                     $(element).valid=false;
                 }
             }
             },
             productType: {
                 required: true,
                 minlength:2,

             },
             productBrand: {
                 required: true,
                 minlength:2,

             },
             description: {
                 required: true,
                 minlength:10,
                 maxlength:150,

             },
             updatedBy:{
                 required:true,
                 minlength:2,
             }
         },
         messages:{
             productName:{
                 required: "Please enter the productName",
                 minLength: "The name should be atleast 2 characters long",
             },
             productType: {
                 required: "Please enter the productType",
                 minlength:"The type should be atleast 2 characters long",

             },
             productBrand: {
                 required: "Please enter the productBrand",
                 minlength:"The Brand Name should be atleast 2 characters long",

             },
             description: {
                 required: "Please describe your product",
                 minlength: "The description should be atleast 10 characters long",
                 maxlength: "You can not enter more than 150 characters",

             },
             updatedBy:{
                 required: "PLease Your name",
                 minlength: "The name should be atleast 2 characters long",
             }
         },
         submitHandler: function(form){
             if(productsForm.valid())
             {

                alert('tada');
                 return false;
             }
             else
             {
                 alert('not valid');
                 return false;
             }
         }
     });   
    });

Теперь я пытаюсь создать функцию, которая проверяет , содержат ли входные значения теги HTML или нет. Если да, то покажите сообщение об ошибке msg и не отправляйте форму. Но я не знаю, как это сделать. Может ли кто-нибудь помочь?

Я попытался создать функцию onfocusout но не знаю, как добавить ошибку.

  • 0
    submitHandler , по определению, срабатывает только тогда, когда форма «действительна», поэтому ваша логика if valid() является излишней, поскольку она всегда действительна на этом этапе и никогда не вызовет предупреждение « 'not valid' . Если вам нужно вызвать что-то в недопустимой форме, также используйте invalidHandler . Смотрите документацию и эту демонстрацию: jsfiddle.net/zAa3G
  • 0
    Почему бы не использовать alphanumeric правило, которое автоматически исключало бы любой HTML?
Теги:
jquery-validate

4 ответа

5
Лучший ответ

Название цитаты:

"как проверить HTML-теги, а затем добавить ошибку в jQuery Validation"

Если вы используете плагин jQuery Validate, вам нужно только указать правило для поля, и соответствующее сообщение об ошибке будет автоматически переключено. Существуют встроенные методы для создания пользовательских правил и встроенных методов для перебора любого текста ошибки с вашим пользовательским текстом. Плагин автоматически блокирует отправку формы во время любой ошибки, включая ошибки, вызванные вашими пользовательскими правилами.

Ответить OP:

"Теперь я пытаюсь создать функцию, которая проверяет, содержат ли входные значения теги html или нет. Если да, то покажите сообщение об ошибке msg и не отправляйте форму".

Ваше второе предложение просто описывает, что делает каждое правило валидации. Проверяет входные данные и блокирует представление при сбое этого теста. Ваше первое предложение - это то, что вы хотите, чтобы ваше правило выполнялось... убедитесь, что вход не содержит тегов.

Ответить OP:

"Я попытался создать функцию как onfocusout но не знаю, как добавить ошибку ".

Ваша попытка кода указывает, что вы делаете этот путь более сложным, чем это должно быть. Вам не нужно возиться с какой-либо одной функцией обратного вызова плагина, чтобы создать одно новое правило... в этот момент вы могли бы также написать свой собственный плагин проверки с нуля.

Чтобы добиться того, чего вы хотите, вам просто нужно использовать метод addMethod для написания собственного пользовательского правила проверки jQuery. В этом случае вам понадобится регулярное выражение, которое исключает HTML-теги... возможно, только с учетом букв и цифр. (Подстройте регулярное выражение или замените функцию на все, что вы сочтете нужным).

Обратитесь к этому действительно базовому примеру:

jQuery.validator.addMethod("noHTML", function(value, element) {
    // return true - means the field passed validation
    // return false - means the field failed validation and it triggers the error
    return this.optional(element) || /^([a-z0-9]+)$/.test(value);
}, "No HTML tags are allowed!");

$('#myform').validate({
    rules: {
        field1: {
            required: true,
            noHTML: true
        }
    }        
});

ДЕМО: http://jsfiddle.net/mM2JF/

Однако файл additional-methods.js уже содержит различные правила, которые автоматически исключают любой HTML...

letterswithbasicpunc => "Буквы или знаки препинания только пожалуйста"

alphanumeric => "Только буквы, цифры и подчеркивания".

lettersonly => "Письма только пожалуйста"

$('#myform').validate({
    rules: {
        field1: {
            required: true,
            alphanumeric: true  // <- will also not allow HTML
        }
    }        
});

ДЕМО 2: http://jsfiddle.net/mM2JF/1/

Поделиться
1

Попробуйте этот код для проверки HTML-тегов

jQuery.validator.addMethod("noHTMLtags", function(value, element){
    if(this.optional(element) || /<\/?[^>]+(>|$)/g.test(value)){
        return false;
    } else {
        return true;
    }
}, "HTML tags are Not allowed.");



$('#form').validate({
rules: {
    message: {
        required: true , noHTMLtags: true
    }
}});

Надеюсь, это тоже хороший пример.

Поделиться
0

Я использую регулярное выражение для предотвращения тегов HTML в своем текстовом поле

$.validator.addMethod(
    "no_html",
    function(value, element) {
        if(/<(.|\n)*?>/g.test( value )){
            return false;
        }else{
            return true;
        }
    },
    "HTML tag is not allow."
);
$('#myform').validate({
    rules: {
        field1: {
            required: true,
            no_html: true
        }
    }        
});
Поделиться
0

Вот пример того, что я сделал

$.validator.addMethod("CHECKDOB", function(value, element) {  
            return this.optional(element) || check_blank_dob(element); 
            }, "Please Enter Birth Date");

//См. Функцию checkdob добавлена в валидатор

Теперь

В правилах

 rules:{
                        <%=txtfirstname.UniqueID %>: {required: true},                            <%=txtlastname.UniqueID %>: {required: true},
                        <%=txtdateofbirth.UniqueID %>: {                            required: true,
                        CHECKDOB:"Please Enter Birth Date",//see here i have called that function
                        date:true                  
                        },

теперь сообщения

messages: {
         <%=txtfirstname.UniqueID %>:{required: "Please Enter First Name"},
        <%=txtlastname.UniqueID %>:{required: "Please Enter Last Name"},
         <%=txtdateofbirth.UniqueID %>:{
          required: "Please Enter Birth Date",
          CHECKDOB:"Please Enter Birth Date",
          date:"Invalid Date! Please try again" 
                        },

Вот ваша функция

 function check_blank_dob()
    {
       var birth=document.getElementById("<%=txtdateofbirth.ClientID%>").value
       if(birth=="__/__/____")
       {
                return false;
       }
            return true;
    }

См. Эту функцию, которую я вызвал при функции checkdob при добавлении метода в валидатор

Это просто пример того, как добавить, что вам нужно реализовать свой метод. Надеюсь, это поможет вам... :)

Поделиться
  • 1
    <%=txtfirstname.UniqueID %> ~ Как это помогает OP? Он никогда не упоминал об использовании каких-либо фреймворков, не говоря уже о том, что вы используете. Этот вопрос касается JavaScript, который является клиентским кодом, поэтому мы не ожидаем увидеть серверный код, который не имеет ничего общего с JavaScript в ответе. Кроме того, что все эти вещи DOB имеют отношение к исключению HTML из ввода?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню