forms - Change input value with Javascript - Stack Overflow

admin管理员组

文章数量:1429060

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.

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.

• javascript
• forms
• validation
• email
• input

Share Improve this question Follow asked Mar 9, 2013 at 17:04 fperezdpfperezdp 3311 silver badge33 bronze badges 7

• email.value = 'Retry! You swine!'; Note, setAttribute() is not the same as setting a property on an element (in most cases). – Jared Farrish Commented Mar 9, 2013 at 17:09
• I would consider using placeholders for error messages instead of writing directly the error message in the input. – Mmmh mmh Commented Mar 9, 2013 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 Commented Mar 9, 2013 at 17:11
• Take a ook at my answer 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 Commented Mar 9, 2013 at 17:21
• Yes, that's true.. but I wanted it to be cool. I'll see what I can do. – fperezdp Commented Mar 9, 2013 at 17:21

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 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/XJZwm/

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

本文标签： formsChange input value with JavascriptStack Overflow