Fire an event on phone number validation

Fix a bug introduced by recent phone number input work that prevented
the call and sms buttons from being clickable.
This commit is contained in:
lilia 2015-01-17 22:51:32 -10:00
parent f6376c0fa2
commit 5d044bd00e
3 changed files with 6 additions and 3 deletions

View file

@ -34,7 +34,7 @@
} else { } else {
$('#choose-setup').show().addClass('in'); $('#choose-setup').show().addClass('in');
$('input.number').on('keyup', function() { $('input.number').on('validation', function() {
if ($('#number-container').hasClass('valid')) { if ($('#number-container').hasClass('valid')) {
$('#request-sms, #request-voice').removeAttr('disabled'); $('#request-sms, #request-voice').removeAttr('disabled');
} else { } else {

View file

@ -38,9 +38,10 @@ var Whisper = Whisper || {};
}, },
validateNumber: function() { validateNumber: function() {
var input = this.$el.find('input.number');
try { try {
var regionCode = this.$el.find('li.active').attr('data-country-code').toUpperCase(); var regionCode = this.$el.find('li.active').attr('data-country-code').toUpperCase();
var number = this.$el.find('input.number').val(); var number = input.val();
var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode); var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode);
@ -49,6 +50,8 @@ var Whisper = Whisper || {};
return parsedNumber; return parsedNumber;
} catch(e) { } catch(e) {
this.$el.find('.number-container').removeClass('valid'); this.$el.find('.number-container').removeClass('valid');
} finally {
input.trigger('validation');
} }
} }
}); });

View file

@ -87,7 +87,7 @@
</div> </div>
<script type="text/x-tmpl-mustache" id="phone-number"> <script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form"> <div class="phone-input-form">
<div class="number-container"> <div id="number-container" class="number-container">
<input type="tel" class="number" placeholder="Phone Number" /> <input type="tel" class="number" placeholder="Phone Number" />
</div> </div>
</div> </div>