0

I'm working on a registration page (form). If the two password fields don't match I want to display an alert but I don't want it to refresh after the alert is displayed and lose all the information in all the other fields. Ideally, I'd love it if it reset the two password fields only and kept everything else the same.

JavaScript Code:

function passwordMatch(){

    if(document.getElementById('password1').value !== document.getElementById('password2').value){
        alert("Passwords don't match!");
        false;
    }

}

I looked around and all I could find were solutions using PHP I'm not sure if I should switch to that but I prefer using JavaScript.

HTML Code

<form id = "testform" name = "testform" method = "post" action="" onsubmit="return validate(this);">
    <p><label for="userFirstName">Fisrt Name:</label>
        <input name = "userFirstName" type = "text" id = "userFirstName"/>
    </p>
    <p><label for ="userLastName">Last Name:</label>
        <input name="userLastName" type = "text" id = "userLastName"/>
    </p>
    <p><label for = "userName">Username:</label>
        <input name = "userName" type = "text" id = "userName"/>
    </p>
    <p><label for = "password">Enter Password:</label>
        <input name = "password" type = "password" id = "password1"/>
    </p>
    <p><label for = "password2">Re-Enter Password:</label>
        <input name = "password2" type = "password" id = "password2"/>
    </p>
    <p>
        <input type = "submit" name="save" href = "login.php"  value = "Register"/>
    </p>
</form>
benomatis
  • 5,536
  • 7
  • 36
  • 59
ybce
  • 176
  • 4
  • 17
  • What's the line `false;`? I'm pretty sure you mean `return false;` however we need to see a [mcve] to be sure. – j08691 Apr 03 '16 at 20:59
  • Try 'return false' instead of just 'false', and if that doesn't work, post the code as to how you are calling the function. – RichardB Apr 03 '16 at 21:01
  • Thank you, return false did the trick but it also keeps the password fields is there a way I can reset the password fields and keep the rest, I can post the whole html code if it helps. – ybce Apr 03 '16 at 21:05
  • Just add the js to clear those fields - ie document.getElementById('password2').value=""; alongside the error message. See my answer about HTML5 validation, though, as it is probably sensible to use that as much as possible rather than using uglier alert boxes. – RichardB Apr 03 '16 at 21:13
  • Thank you very much for your help, sorry if it seems trivial I'm very new to web development. I'll also look into verifying everything on the server-side with PHP. – ybce Apr 03 '16 at 21:15
  • There is a question [here](http://stackoverflow.com/questions/9142527/can-you-require-two-form-fields-to-match-with-html5) as to how to do this with HTML5 validation and a spot of javascript, which seems a tidy approach - HTML5 validation meaning the browser handles the error message display etc. A big point to make, however, is that javascript validation is not secure. If the submitted data is being entered into a database or anything like that, you must also do it server side. – RichardB Apr 03 '16 at 21:08

0 Answers0