Email Validation Real-time message, email shows randomly and does stay

Question

I am trying to display the email typed in the email input field in a validation message. The input field also already checks my database for registered emails and then displays a message depending on the result. I then added this code from here.

The result is that the validator will return with its message, but with a blank span for the email. If I type a key, the email will show up for a split second and then disappear(due to the validator rechecking the database), yet the "Confirmation will be sent to" message will then come back but email span remains blank.

<script>
//echo typed in email
    $('#youremail').keydown(function() {
    $('#youremail-confirm').text($(this).val());
    });
//check if the current user is already taken
$('#youremail').keyup(function(){
    var user = $('#youremail').val();
    var userlength = document.getElementById("youremail").value.length;
    if(userlength >= 8 && userlength <= 60) {
        $('.checkemail').html("");
        $.ajax({
            type: "GET",
            url: "<?php bloginfo('template_url'); ?>/ajax/check-username.php",
            data: "user=" + user,
            success: function(data){
                $('.checkemail').html(data);
            }
        });
    };
});
</script>
    <div class="form-label">
        <label for="youremail">Email Address <i>*</i></label>
        <small class="checkemail"></small>
    </div>
    <div class="form-input">
        <input type="email" name="youremail" id="youremail" class="input longinput" value="<?php echo $youremail; ?>" />
    </div> <!-- email -->



<?php 
if (strlen($_GET['user']) > 3 && strlen($_GET['user']) <= 30) {
if (username_exists($_GET['user'])) { //sanitizing is done by WordPress
    echo '<span class="checkusererr">This email is already used. Please <label for="lger" style="font-weight:bold;cursor:pointer;">click here log in</label> or enter another one.</span>';
} else {
    echo '<span class="checkuserok">Confirmation with be sent to <span id="youremail-confirm" style="font-weight:bold;"></span></span>';
} 
} ?>

It looks like you're missing the closing bracket from the `if (strlen...)` part — , Jan 13 '19 at 23:38
I'll rephrase : ) you are missing the closing curly bracket `}` for this part `if (strlen($_GET['user']) > 3 && strlen($_GET['user']) <= 30) {` You have three opening brackets and only two closing brackets... — , Jan 13 '19 at 23:45
Sorry, it's there, must of clipped it when I copied it. Edited to reflect. — D Loy, Jan 13 '19 at 23:48
are you able to refine your question and code and ask it as clearly as possible? It's quite hard to help you at the moment. Please check out this if you haven't already: https://stackoverflow.com/help/mcve — , Jan 13 '19 at 23:50
Sorry it's quite a hard question to ask, but I hope I clarified it a bit better — D Loy, Jan 14 '19 at 00:01
What happens if you put the script with the keydown listener after the Ajax call, or at the end of the file? — , Jan 14 '19 at 00:15
have you tried breaking down the problem into smaller blocks and testing each of those? Just trying the code for echoing the typed email on its own first? etc... — , Jan 14 '19 at 00:39
https://stackoverflow.com/questions/37265440/jquery-onkeydown-not-working-when-appended-to-page — , Jan 14 '19 at 00:45

score 0 · Answer 1 · 2019-01-14T01:00:07.677

0

I think you need to bind your event to a container and then the event will bubble up to #youremail. In this case you would use the .form-input div. This is just an example of the concept:

$('.form-input').on('keydown', '#youremail', function ()
{
    $('#youremail-confirm').text($(this).val());
});

edited Jan 14 '19 at 01:00

answered Jan 14 '19 at 00:31

wrap the small tag, so then $('#youremail-span').keydown('#youremail', function() { $('#youremail-confirm').text($(this).val()); }); right? – D Loy Jan 14 '19 at 00:40
I've edited this answer and suggested a couple of things, give them a try and if your problem isn't solved I'll take another look when I'm not tired : ) Good luck, hopefully someone more knowledgable will come along, definitely try breaking the problem down though if you haven't. – Jan 14 '19 at 00:49

Email Validation Real-time message, email shows randomly and does stay

1 Answers1