Custom Wordpress Registration Form with Validation

Question

I am trying to create a custom modal registration form, but I'm experiencing difficulties with validating the form. Basically what I have managed to do was to use CSS3 to validate the fields based on the pattern="..." orrequired markup used in the <input> tags.

This validation covers simple stuff like checking for password's min. chars and email address syntax. However, what's missing, and very important, is a way for the form to check back with the database to see if the email address a new user wants to register with, is already registered with the website...and if so trigger <i class="icon-attention invalid"></i> to display and if possible make the submit button disabled.

<div class="modal modal-animate" id="login">
<div class="modal-content">
    <section id="modal-register" class="hidden">
            <h4>Sign up for a new account</h4>
            <form enctype="multipart/form-data" method="post" class="frm-show-form " id="form_registration">
            <ul>
              <input type="hidden" name="frm_action" value="create">
              <input type="hidden" name="form_id" value="10">
              <input type="hidden" name="form_key" value="registration">
              <li class="field">
                 <input type="text" id="field_first_name" class="input" name="item_meta[85]" value="" placeholder="First Name" required><i class="icon-check valid"></i><i class="icon-attention invalid"></i>
              </li>
              <li class="field">
                 <input type="text" id="field_last_name" class="input" name="item_meta[86]" value="" placeholder="Last Name" required><i class="icon-check valid"></i><i class="icon-attention invalid"></i>
             </li>
             <li class="field">
                 <input type="email" id="field_email_address" class="input" name="item_meta[87]" value="" placeholder="Email" required><i class="icon-check valid"></i><i class="icon-attention invalid"></i>
             </li>
             <li class="field">
                 <input type="password" id="field_password" class="input" name="item_meta[88]" value="" placeholder="Password" pattern=".{6,}" required><i class="icon-check valid"></i><i class="icon-attention invalid"></i>
             </li>
             <input type="hidden" id="field_r5tog4" name="item_meta[89]" value="" />
             <input type="hidden" name="item_key" value="" />
             <input type="hidden" name="frm_register[username]" value="-1" />
             <input type="hidden" name="frm_register[email]" value="87" />
           </ul>
           <input type="submit" value="Register" formnovalidate="formnovalidate" class="button-full">
           </form>
    </section>
</div>
</div>

Is there some PHP script that can be used to help with validation here, or is the entire form wrong? I've tried testing it and user registration works but if the email is taken, the page just refreshes without registering anything. If it is a valid new email being used, registration works.

score 0 · Accepted Answer · answered Aug 29 '13 at 13:29

You can fetch the email addresses from the user table in an array and then use the php "in_array()" function to search for the supplied email.

Use this to fetch all the emails from the users table. http://codex.wordpress.org/Class_Reference/wpdb

You will have to use some php coding, but if you are not comfortable with programming. Just use some plugin.

Custom Wordpress Registration Form with Validation

1 Answers1