Good day!
There is a registration form. There is such a script:

$(function() { $("#form-regis").submit(function(e) { e.preventDefault(); var formURL = $(this).attr("action"); var formmethod = $(this).attr("method"); var postData = $(this).serialize(); $.ajax({ type: formmethod, url: formURL, data:postData, cache: false, success: function (data) { console.log(data); } }); return false; }); });

My scanty knowledge of JavaScript and jQuery does not leave me the opportunity to bring all this to the page. The registration form in the modal window, so I can not do without Ajax . In the console, I accept an array of errors, namely those that I admit when filling out the form. Help to bring them to the list on the page. First, I’ll have to figure it out, and then I’ll need to hide the form in the absence of errors and deduce that the registration is successful and a confirmation email has been sent to the post office.

I apologize for the incomplete information. The data comes in JSON format, in such a structure "field: array / error object"

Now did this:

 success: function (errors) { console.log(errors); var out = ''; if (errors[0].name) out += "<p>"+errors[0].name+"</p>"; if (errors[0].email) out += "<p>"+errors[0].email+"</p>"; if (errors[0].password) out += "<p>"+errors[0].password+"</p>"; $('#errors-block').html(out).fadeIn(); }

But if you fill without errors, swears with this line:

  Uncaught TypeError: Cannot read property 'name' of undefined

Laravel 5

  • If you do not have good skills in JS , then do not undertake to impose yourself - just spend your nerves. And on the issue - little data. What format is the data received in? How should they be displayed and where (usually this is dictated by the theme of the site)? - user207618 pm
  • @Other In json format. Print just to the same modal, add a div with ids "errors", and how can I loop through all the errors in the saxassis instead of console.log? So that they appear just above the form itself. - overtheman

3 answers 3

Here is the code that I use in the laravel application. Everything works perfectly

 $.ajax({ url : form.attr("action"), type : form.attr("method"), data : formData, dataType: 'json', cache: false, contentType: false, processData: false, headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, error :function( errors ) { output = "<div class='alert alert-danger'><h4><i class='icon fa fa-ban'></i> Возникла ошибка!</h4><ul>"; $.each(errors.responseJSON, function(index, error){ output += "<li>" + error + "</li>"; }); output += "</ul></div>"; $('#append').html(output); }, success: function(data){ output = "<div class='alert alert-success'><h4><i class='icon fa fa-check'></i> Готово!</h4><ul>"; output += data.success; output += "</ul></div>"; $('#append').html(output); setTimeout(function(){ window.location.replace('{{ url('panel/catalog') }}')}, 3500 ); } })
  • Hello! I basically figured it out, only I have poorly in terms of the parameters Ajax. I did not specify a dataType, and the header with the token is also missing. - overtheman
 success: function (errors) { console.log(errors); var out = ''; for(err in errors) { out += "<p>"+errors[0][err]+"</p>" } if(out != '') { $('#errors-block').html(out).fadeIn(); } }

if (errors [0] .name) - returns an error if there is no such property, here you need to check if(typeof errors[0].name !== 'undefined')

  • Thank! With God and your general help, creaking, but figured out. - overtheman
  $(function() { var form = $("#form-regis"); form.submit(function(e) { e.preventDefault(); var formURL = $(this).attr("action"); var formmethod = $(this).attr("method"); var postData = $(this).serialize(); $.ajax({ type: formmethod, url: formURL, data:postData, cache: false, success: function (data) { var res = JSON.parce(data); for(err in res) { $('[name=' + err + ']', form).after('<span class="error">' + res[err] + '</span>'); } } }); return false; }); });

This is if the response comes {"fieldName": "errorText", ....}

  • Updated the question. Thanks for the response. - overtheman