0

I'm trying to validate a username and domain together (basically to validate the entire email address). I want it to be validated when I click outside either of the two inputs. I have an input tag for the username and a select tag for the possible domains.

I've looked at a number of StackOverflow posts including this one, which seemed to be exactly what I needed. I tried modifying the fiddle in the accepted answer to have as few differences as possible, but I was not able to trigger validation of my inputs. I also saw this link and made sure to not ignore hidden fields.

Here's a fiddle showing the issue, and also the HTML / JS:

<form id="form2">
<div class="usernameAndDomain">

  <input type="hidden" name="usernameAndDomainValidation" class="required">

  <input data-index="" id="userName" name="userName" class="userName required" type="text" maxlength="100">
  <select class="domainForUser userDomain" name="userDomain">
  <option value="address1.com">@address1.com</option>
  <option value="address2.com">@address2.com</option>
  </select>
</div>
    <input type="submit" />
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

$.validator.setDefaults({ 
    ignore: [],
    // any other default options and/or rules
});
$(document).ready(function () {

    $.validator.addMethod('usernameAndDomainCheck', function(value, element, params) {
/*         var field_1 = $('input[name="' + params[0] + '"]').val(),
            field_2 = $('input[name="' + params[1] + '"]').val();
        return parseInt(value) === parseInt(field_1) + parseInt(field_2); */
        return false;
    }, "Invalid form");

    $("#form2").validate({
       onkeyup: false,
       onclick: false,
       focusCleanup: true,
       focusInvalid: false,
       rules: {
            usernameAndDomainValidation: {
                usernameAndDomainCheck: ['userName', 'userDomain']
            },
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

I expect that the "Invalid form" message would show since the validator method always returns false, but it is not showing that. I'm not sure what's causing that validator method to not be run.

Sparky
  • 98,165
  • 25
  • 199
  • 285
VMS
  • 393
  • 6
  • 15
  • What exactly are you trying to do?? `parseInt()` is used for converting text to number format... how exactly is that relevant here? – Sparky Jul 19 '19 at 19:48
  • "basically to validate the entire email address" - validate it for what? To make sure it's a valid email address? There is already a rule for that called `email`. – Sparky Jul 19 '19 at 19:49
  • *"I'm not sure what's causing that validator method to not be run."* - you said you added the `ignore: []` option but you completely left it out of your jsFiddle. Then I removed the `required` attribute; it makes no sense here since nobody can fill out a hidden field. http://jsfiddle.net/e09qormp/ – Sparky Jul 19 '19 at 20:02
  • @Sparky Yes the parseInt was irrelevant, that's why I commented it out. I looked at the `email` rule but that didn't work for my case since I have a select and an input tag, not one input tag, and also because I need to do custom validation on the inputs. Also, sorry about the jsfiddle - I thought I had saved it but I guess not. I intended to validate just username and domain inputs through the third input, based on what I read in the StackOverflow post that I mentioned. I don't think this question is a duplicate of the one I mentioned since that question did not help me solve this issue. – VMS Jul 19 '19 at 22:33
  • Once you combine the information from the two fields, then you'll have an email address copied into the value of the hidden field. Once there, you can just validate the hidden field using the standard `email` rule. Alternatively, you can look at the standard `email` rule and copy/paste/edit that inside of the function in your custom rule. – Sparky Jul 20 '19 at 00:05

0 Answers0