0

I'm trying to validate a form without using jQuery as in my project I do not need jQuery. I would like to save on loading files for the sake of performance. I've checked on youmightnotneedjquery and I found this snippet to use POST with Ajax.

I only find tutorials how to validate emails with jQuery or PHP. Could somebody could explain me, guide me or knows about a tutorial that could help me?

I would appreciate it greatly!

I also checked this framework from microjs.com but there are also no instructions :(

Ajax:

 var request = new XMLHttpRequest();
 request.open('POST', '/my/url', true);
 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
 request.send(data);

HTML form:

<form class="contact-form">
    <label for="email">
         Email*
    </label>
    <input id="email" type="email" name="email" placeholder="example@emailserver.com" required>
    <label for="telephone">
         Telephone
    </label>
    <input id="telephone" type="tel" name="telephone" placeholder="+32 343 645 461">
    <label for="message">
         Message*
    </label>
    <textarea id="message" placeholder="Place your magnificent message here..." required></textarea>
    <input id="sendcopy" type="checkbox" name="sendcopy">
    <label for="sendcopy">
        Send yourself a copy of the email
    </label>
    <input type="submit" name="submit" value="Send">

    <span class="required-field-legend">
       <!-- insert icon -->
       Required fields
    </span>

Daniel Ramirez-Escudero
  • 3,877
  • 13
  • 43
  • 80
  • Does your form have a button with an onclick handler that calls a function wrapped around your JS code in the question? – mrk May 27 '14 at 18:28
  • @mrk At this moment thats all what I have, do I need to create an event listener if the submit button is clicked do something? My issue is that I do not understand that snippet, I do not know how to use it and I do not find any guidance on the internet. – Daniel Ramirez-Escudero May 27 '14 at 18:37
  • @Vinz243 I do not know how to use the Ajax snippet and I do not find any guidance on the internet. Could you help? – Daniel Ramirez-Escudero May 27 '14 at 18:38
  • @antithesis I will create this Ajax function to validate. I've done it before with jquery but never without it. I have no server, I do not understand fully what do you mean with that. I want to use Ajax so the user can stay in the same page without refreshing. Does this make sense? As you see I don't fully understand some concepts, that's why I need some help. – Daniel Ramirez-Escudero May 27 '14 at 18:50

1 Answers1

1

You can take a look at Mozilla Developer Network and try using XMLHttpRequest. To give you the basic idea, you will have to write a php file which receives the information from the form fields, does some checking and sends an XML response back. Then you will have to show something to the user according to what has happened (for example the email address was empty).

Another approach (which is the one I would suggest) is to do your validation with javascript. Just get the value of the element you want, for example:

var tel = document.getElementById('telephone').value;

and then check if it is ok. You can do that with Regular Expressions. In case there is something wrong, notify the user. This way you don't use the server at all. I hope I 've helped...

See this jsfiddle to understand what I mean by saying I prefer validation at client side.

tgogos
  • 23,218
  • 20
  • 96
  • 128
  • 1
    @antihesis Thank you, I will read thoroughly the link you sent me. I thought only AJAX could display error messages for the form without reloading the page. I now know what you mean with server side validation. I've read that it's better to do a combination of both validations, is this an easy task? Here you have a link of what I mean: http://stackoverflow.com/questions/162159/javascript-client-side-vs-server-side-validation. Thank, you are helping a lot :) – Daniel Ramirez-Escudero May 28 '14 at 08:03
  • @Daniel Ramirez-Escudero, your link helped change my point of view! I agree with the phrase mentioned:`...having validation on the client is nice for users, but is utterly insecure.` You should better go that way... Oh, and +1 for your eye-opening link :-) – tgogos May 28 '14 at 15:09