3

The title seems easy, but I need help.

I have a form with a field input "email" of which value is null until the user fills it up. Okay, on click of the submit button, I call the function validate() which is:

function validate(){
    var email=document.getElementById("email");
    if(!(/[\w-\.]{3,15}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/.test(email))) {
        email.setAttribute('value','Insert a correct email');
        email.style.border="2px solid red";
    } else {
        alert("Valid field"); // This is to test it works
        email.style.border="2px solid #63ce40";
        this.form.submit();
    }
    }

What I want to do here is that if the email inserted does not meet the requirements (is not valid), change the value of the input with "Insert a correct email".

If the field is empty and I click submit, it works perfectly, but if I insert text and click submit, the only change will be the field getting a 2px red border, but no text change.

I would like to know what I have to do so that when I click submit the wrong email that was written, is removed and replaced by the text "Insert a correct email".

The input is:

<li>
    <input type="text" id="email" name="email" 
    value="" onfocus="this.value=''" size="40"/>
</li>

And the submit button I'm using:

<input id="bsubmit" type="button" value="Submit"
name="submit" onclick=";this.disabled=true;validate();
this.disabled=false;"/>

Thank you.

fperezdp
  • 33
  • 1
  • 3
  • **`email.value = 'Retry! You swine!';`** Note, `setAttribute()` is not the same as setting a property on an element (in most cases). – Jared Farrish Mar 09 '13 at 17:09
  • I would consider using placeholders for error messages instead of writing directly the error message in the input. – Mmmh mmh Mar 09 '13 at 17:11
  • 1
    Yes, this is a bad design...you're overwriting the email address the user just typed, rather than giving them a chance to look at it, see the problem, and correct it. – Matt Browne Mar 09 '13 at 17:11
  • Take a ook at [my answer](http://stackoverflow.com/a/15273623/451969) to a similar question the other day. Also, if you're not already, you **are required** to validate userland-originating data. That is the *real* validation (PHP's `filter_var()` has an awesome email validation filter), what happens on the client is simply for the user's sake. You can't rely alone on any other validation. – Jared Farrish Mar 09 '13 at 17:21
  • Yes, that's true.. but I wanted it to be cool. I'll see what I can do. – fperezdp Mar 09 '13 at 17:21
  • Jared, I don't understand what userland-originating data really is... I'm quite new to this, and I'm working on this validation as a class project.. – fperezdp Mar 09 '13 at 17:26
  • @user2151981 - Any data that comes into a server from outside the server's complete control or supervision. That is *userland-originated*. It can be solicited (contact form submitted to a script on your site), unsolicited (exe: spam bots trolling for exploitable mail scripts to overrun with their warez). It could be data you let leave your server's control, which then returns. *You have to validate on the server, everything, that your scripts handle, save to a file, query or modify a database*. See [my answer here](http://stackoverflow.com/a/15287536/451969). Internet's a bad neighborhood. – Jared Farrish Mar 09 '13 at 17:48

2 Answers2

3

It's good that you were trying to use setAttribute at all because it's an important method, but the problem is that you don't want to modify the value attribute in this case, which is a part of the DOM, but you want to modify the <input> element's value property.

email.value = 'Insert a correct email';

http://jsfiddle.net/XJZwm/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • Thank you too, both of you gave me the same solution which is perfectly working. Your explanation also helped, I'll keep that in mind :) – fperezdp Mar 09 '13 at 17:13
  • @user2151981 - This is the answer *because it answers the question*, not just *provides a means to fix a problem*. Explosion Pills actually told you something useful. This should be accepted (and you should upvote too). – Jared Farrish Mar 09 '13 at 17:51
  • Done; I had upvoted it at first for that reason. Anyways I can't upvote since I don't have 15+ reputation. Do you mind checking my code on jsFiddle? you'll see that even if you insert a correct email, it'll say it's wrong... I can't see where it's failing :/ – fperezdp Mar 09 '13 at 17:59
  • @user2151981 - Oh yeah, you have to use the `form`s `onsubmit` event, the `submit` *button's* click event doesn't do anything to stop the `form` from continuing the request. – Jared Farrish Mar 09 '13 at 18:01
  • @user2151981 - This answer demonstrates jQuery event methods and is about disabling the `submit` button from continued clicking, but [don't be the guy in the comments](http://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit/5691065#5691065) underneath my answer. `:s` It's the `form` event you need to handle and possibly prevent. Trust me. `:)` – Jared Farrish Mar 09 '13 at 18:03
0

Try this email.value = 'Insert a correct email'; instead of email.setAttribute('value','Insert a correct email');

Vasile Goian
  • 425
  • 5
  • 9