2

Segue o código:

$(document).ready(function () {
            $("#myform").validate({
                ignore: ":hidden",
                rules: {

                    images: { required: true, extension: "jpg"},
                    messages: { 
                    images: Arquivo inválido}
                    },
                    submitHandler: function (form) {


                        ajax - post ....

                    }                   
            }
}

Html:

<input type="file" id="image_preview" class="form-control" name="images" accept="image/*">

Eu uso esse bootstrap fileinput

Após de escolher uma imagem, recebo erro:

Uncaught TypeError: Cannot read property 'call' of undefined. Exception occurred when checking element image_preview, check the 'extension' method.

Se eu deixar somente "{ required: true}" ele funciona como o campo requerido. Com o tipo de extensão não funciona.

Alguma solução ?

4
  • Pode ser a versão do jQuery Validate. Baixou do site deles ? Commented 18/01/2017 às 22:07
  • Baixei pelo manage nuget packages Commented 18/01/2017 às 22:09
  • Você adicionou o jquery.validate.methods na página depois do jquery.validate ? Commented 18/01/2017 às 22:13
  • Eu não encontro esse nome jquery.validate.methods na minha pasta script. Detalhe, baixei direto pelo nuget. Commented 18/01/2017 às 22:16

1 Resposta 1

1

Para funcionar esse tipo de validação é simples, adicione o additional-methods.min.js junto com jQuery e jQuery.Validation, e na sua validação inclua extension com os tipos que deseja verificar, no exemplo eu coloquei jpg|jpeg|gif, mas, isso fico ao seu critério.

Exemplo:

Form

<form id="form1" name="form1" method="post">
  <div>
    <label> Digite o nome:
      <input type="text" name="tname" />
    </label>
  </div>
  <div>
    <label> Escolha a Foto:
      <input type="file" name="tfoto" id="tfoto" />
    </label>
  </div>
  <button>Enviar</button>
</form>

Javascript

$(document).ready(function()
{
    $("#form1").validate({
        ignore: ":hidden",
      rules: {
        tname : {
            required : true
        },
        tfoto : {
            required : true,
            extension: "jpg|jpeg|gif"
        }
      },
      messages: {
        tname : {
            required : 'Digite o nome'
        },
        tfoto : {
            required : 'Escolha a foto',
            extension: 'Foto do tipo inválida'
        }
      }
  });

  $("#tfoto").filestyle();
});

Exemplo - jsfiddle.net

Para adicionar a referencia no , faça:

bundles.Add(new ScriptBundle("~/bundles/jqueryval")
         .Include("~/Scripts/jquery.validate*","~/Scripts/additional-methods.min.js"));

Referencia:

Lib - jQuery.validate

2
  • 1
    Thank you :) Viriglio Novic Commented 18/01/2017 às 22:35
  • 1
    Coloquei na resposta !!! @MatheusMiranda
    – novic
    Commented 18/01/2017 às 22:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .