Form validation and HTML modification

Question

Description:

I'm trying to validate a <form> in the server side. To do this I send form inputs in JSON to the back-end (an express.js app) using AJAX. After validate, I send to the front-end another JSON with this structure:

{
     input1: true|false,
     ...
     inputN: true|false
}

(true is right and false wrong)

Now, in the front-end if one input it's wrong a <span> is added next to the <input> indicating that it's incorrect. If it's right happens the same but indicating that the <input> is correct.

The issue comes in back-end to front-end response, the AJAX call fails and IDK why.

HTML code:

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function submitForm() {
            $('span').remove();

            let req = $.ajax({
                url: 'http:localhost:3000/validate',
                dataType: 'json',
                data: $('#myForm').serializeArray()
            });

            req.done((data, textStatus, jqXHR) => {
                alert('OK');

                for (input in data) {
                    let elem = '<span style="color: green">OK</span>';
                    if (!data[input])
                        elem = '<span style="color: red">ERROR</span>';
                    $('#${input}').append(elem);
                }
            });

            req.fail((jqXHR, textStatus, errorThrown) => {
                alert('ERROR');
            });
        }
    </script>
</head>
<body>
    <form id="myForm">
        <div id="name">
            <input type="text" name="name" placeholder="Name">
        </div>
        <div id="surname">
            <input type="text" name="surname" placeholder="Surname">
        </div>
        <input type="submit" onclick="submitForm()">
    </form>
</body>
</html>

Edited HTML code:

<!DOCTYPE html>
<html>
<body>
    <form id="myForm">
        <div id="name">
            <input type="text" name="name" placeholder="Name">
        </div>
        <div id="surname">
            <input type="text" name="surname" placeholder="Surname">
        </div>
        <input type="button" value="Send" onclick="submitForm()">
    </form>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function submitForm() {
            $('span').remove();

            let req = $.ajax({
                url: 'http:localhost:3000/validate',
                dataType: 'json',
                data: $('#myForm').serializeArray()
            });

            req.done((data, textStatus, jqXHR) => {
                alert('OK');

                for (input in data) {
                    let elem = '<span style="color: green">OK</span>';
                    if (!data[input])
                        elem = '<span style="color: red">ERROR</span>';
                    $('#${input}').append(elem);
                }
            });

            req.fail((jqXHR, textStatus, errorThrown) => {
                alert('ERROR');
            });
        }
    </script>
</body>
</html>

NodeJS code:

const express = require('express');


const app = express();

app.get('/validate', (req, res) => {
    let query = req.query;

    let obj = {};
    obj.name = query.name == 'Marco';
    obj.surname = query.surname == 'Canora';

    console.log(obj);

    res.json(obj);
});

app.listen(3000, () => {
    console.log('App is listening');
});

Browser console:

http://localhost:3000/validate?name=Marco&surname=Canora. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

BTW:

Using jsonpCallback seems to work but I don't understand how and why works.

jsonpCallback function not working

Tip, please never add the `js script` in the head, always at the `end` inside of `body tag`. — Raghav Garg, Sep 02 '17 at 10:40
Oh, OK. I saw in the `` a lot of times but why? And why at the end? I remember that inside ` — Marco Canora, Sep 02 '17 at 10:44
When your code is parsed (on page load) the `data: $('#myForm').serializeArray()` fails to find `#myForm` because the element do not exist yet. That's why the idea of placing it at the end of the page. Another way is to wrap your code with `$(document).ready(function(){` and `});` so the code is parsed when all DOM elements are loaded. — Louys Patrice Bessette, Sep 02 '17 at 10:54
Doesn't work. BTW from the begining the the back-end recieves the JSON, the issue comes when the client receives the server response. I think that the problem is the ajax call. — Marco Canora, Sep 02 '17 at 11:54
If you are getting the "OK" alert... Could you post the data you are getting? Use `console.log(JSON.stringify(data));` — Louys Patrice Bessette, Sep 02 '17 at 12:05
I'm not getting the OK alert, all the time is ERROR. But the message arrives to the back-end. — Marco Canora, Sep 02 '17 at 12:07
ok.. That wasn't clear. So console log the errorThrown then. — Louys Patrice Bessette, Sep 02 '17 at 12:08
mmm... I just saw that `http://localhost:3000/validate`. Notice the slashes. Maybe ? — Louys Patrice Bessette, Sep 02 '17 at 12:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153521/discussion-between-marco-canora-and-louys-patrice-bessette). — Marco Canora, Sep 02 '17 at 12:21
Try `http://127.0.0.1:3000/validate`. After this... I don't know. — Louys Patrice Bessette, Sep 02 '17 at 13:37
Doesn't work. I think the issue is in the back-end, with the expressjs module — Marco Canora, Sep 02 '17 at 15:00

score 1 · Answer 1 · answered Sep 02 '17 at 15:48

Adding this to the app.js resolve's the issue:

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

https://enable-cors.org/server_expressjs.html

Ajax post response from express js keeps throwing error

Form validation and HTML modification

1 Answers1