Form validator

Hi,

The plugin has option to make the fields mandatory. You can find it in the shortcode composer.

Regarding email validation, this is not yet supported. However, you can add the following script in your page, together with the plugin, that will do exactly this:

wfu_addEventHandler(window, "load", implement_emailvalidation);
function implement_emailvalidation() {
  window["wfu_check_required_userdata"] = function(sid, prompt) {
   var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
   var userdata_count = wfu_get_userdata_count(sid);
    var req_empty = false;
    for (var i = 0; i < userdata_count; i++) {
      var msg_hid = document.getElementById('hiddeninput_' + sid + '_userdata_' + i);
      var msg = document.getElementById('userdata_' + sid + '_message_' + i);
      var msg_lab = document.getElementById('userdata_' + sid + '_label_' + i);
      var msg_cont = document.getElementById('userdata_' + sid + '_' + i);
      var msg_hint = document.getElementById('userdata_' + sid + '_hint_' + i);
      var req_class = "file_userdata_message_required";
      if (!(msg.className.substr(0, req_class.length) != req_class || msg_hid.value != "")) {
        if (prompt) {
          msg.className = req_class + "_empty";
          var cont_rect = msg_cont.getBoundingClientRect();
          var msg_rect = msg.getBoundingClientRect();
          msg_hint.style.left = parseInt(msg_rect.right - cont_rect.left) + 'px';
          msg_hint.style.top = parseInt(msg_rect.top - cont_rect.top) + 'px';
          msg_hint.innerHTML = GlobalData.consts.userdata_empty;
          msg_hint.style.display = "block";
        }
        req_empty = true;
      }
      else if (msg_lab.innerHTML.replace(/\s|-/g, "").toLowerCase().indexOf("email") >= 0) {
        var is_confirm = (msg_lab.innerHTML.toLowerCase().indexOf("confirm") >= 0);
        if (is_confirm) {
          var original = null;
          for (var j = 0; j < userdata_count; j++) {
            var hid = document.getElementById('hiddeninput_' + sid + '_userdata_' + j);
            var elem = document.getElementById('userdata_' + sid + '_label_' + j);
            if (!(elem.innerHTML.replace(/\s|-/g, "").toLowerCase().indexOf("email") < 0 || elem.innerHTML.toLowerCase().indexOf("confirm") >= 0)) {
              original = hid;
              break;
            }
          }
          if (original != null) {
            if (!(original.value == "" || !re.test(original.value) || msg_hid.value == original.value)) {
              if (prompt) {
                msg.className = "norequired " + req_class + "_empty";
                var cont_rect = msg_cont.getBoundingClientRect();
                var msg_rect = msg.getBoundingClientRect();
                msg_hint.style.left = parseInt(msg_rect.right - cont_rect.left) + 'px';
                msg_hint.style.top = parseInt(msg_rect.top - cont_rect.top) + 'px';
                msg_hint.innerHTML = "invalid confirmation email";
                msg_hint.style.display = "block";
              }
              req_empty = true;
            }
          }
          else is_confirm = false;
        }
        if (!is_confirm) {
          if (!re.test(msg_hid.value)) {
            if (prompt) {
              msg.className = "norequired " + req_class + "_empty";
              var cont_rect = msg_cont.getBoundingClientRect();
              var msg_rect = msg.getBoundingClientRect();
              msg_hint.style.left = parseInt(msg_rect.right - cont_rect.left) + 'px';
              msg_hint.style.top = parseInt(msg_rect.top - cont_rect.top) + 'px';
              msg_hint.innerHTML = "not valid email";
              msg_hint.style.display = "block";
            }
            req_empty = true;
          }
        }
      }
    }
    return !req_empty;
  }
  window["wfu_userdata_focused"] = function(obj) {
    if (obj.className == 'file_userdata_message_required_empty') {
      obj.className = 'file_userdata_message_required';
      var msg_hint = document.getElementById(obj.id.replace('_message_', '_hint_'));
      msg_hint.style.display = "none";
    }
    else if (obj.className == 'norequired file_userdata_message_required_empty') {
      obj.className = 'file_userdata_message';
      var msg_hint = document.getElementById(obj.id.replace('_message_', '_hint_'));
      msg_hint.style.display = "none";
    }
  }
}

This script will perform email validation to any userdata field with a label that contains the word ’email’ or ‘e-mail’. Furthermore, if the label also contains the word ‘confirm’, then it will be a confirm email field.

Try it and let me know. This will work with the latest version of the plugin.

Nickolas

Hi Nickolas,

Thanks for your reply.
I tried to make a field mandatory by using (required) in the shortcode, but it did not work!

The script you wrote above worked like a charm. Thanks so much. I also manipulated the script to make the other fields mandatory to fill in.

UPDATE: the script is not working on our website’s mobile version. We are using WPtouch for our website’s mobile version.

Cheers,
Shahram

If you put an asterisk before the field name it becomes required. Have you tried this?