I got massive headache getting an international number input with intl-tel-input and webform
I got the documentation here : https://github.com/jackocnr/intl-tel-input
Mentioning that I can get a international number using the "separateDialCode".
separateDialCode
Type: Boolean Default: false
Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable nationalMode because technically we are dealing with international numbers, but with the dial code separated.
However only a national number is posted.
Here my code included into CSS / JavaScript configuration of my webform.
Drupal.webform = Drupal.webform || {};
Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
Drupal.webform.intlTelInput.options = {
preferredCountries: ['fr'],
separateDialCode: true,
autoPlaceholder: "aggressive",
formatOnDisplay: true,
};
I got the separate code showing, validation working, but no international code store inside the input of my form.
I did try the hiddeninput but I do not inderstand the logic to store the full number in an hiddenInput option, if it's already managed by the librairie :(. Same with forcing nationalMode:False.
On this picture the only result I get is "782828282", and not "+33782828282"
Anyone ?
Cheers,
I have used in following format, example is based on what i am doing
<div class="row">
<asp:Label ID="lblPhone" CssClass="lbl" runat="server" Text="Telephone *">
</asp:Label><asp:TextBox ID="txtPhone" CssClass="rg-txt rg-phone-txt" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCountryCode" style="display:none;" Text="" runat="server"></asp:TextBox>
<asp:CustomValidator ID="cvPhone" ErrorMessage="*" CssClass="validate v-phone-txt" ClientValidationFunction="ValidatePhone" ValidationGroup="vg" runat="server" />
</div>
$("#MainContent_txtPhone").intlTelInput({
preferredCountries: ['us'],
utilsScript: "../../Scripts/libphonenumber/utils.js"
});
setTimeout(function () {
$("#MainContent_cvPhone").appendTo(".intl-tel-input");
}, 5000);
during form validation i assign value of country to txtCountryCode $("#MainContent_txtCountryCode").val(country);
From code behind i get both country code & phone number on frontend i only show Country Flag + Phone number.
hope this helps, I had issue running this script as i am using Master Page and script if not place in right place doesn't work properly. if you are not using Master Page approach then it should not be that much of an issue.
I dont remember if i had similar issue as you are facing as i didnt this job almost 2 years back
Related
i have a form where i need to see if an email address entered into the form is already in a database. this check needs to be performed conditionally based on the value of another field in the form.
here is the form field:
<input type="email" value="" class="form-control" name="email_bill" id="email" required data-parsley-type="email" data-parsley-registered="1" data-parsley-trigger="focusout submit">
and here's the validator code:
Parsley.addValidator('registered', {
validateString: function(value) {
if ($('input[name="d_type"]:checked').val() == 'S') {
return $.ajax({
type: "POST",
url: "/is_registered.html",
data: $('form').serialize()
});
} else {
var parent = $('#email').closest('div');
var this_id = $('#email').attr('data-parsley-id');
$(parent).removeClass('has-error').addClass('parsley-success');
$(this_id).remove();
return true;
}
},
messages: {en: "Someone has already registered with the Email address you entered"}
});
the server code is trivial and returns a '200 OK' header if the address isn't in the database and a '404 Not Found' if it is. that works.
i followed the example in the parsley.js custom validator example for the simple ajax request.
what happens is: if i enter a 'registered' address, i get the appropriate error message. if i then go and modify that address to one i know is NOT registered and tab or mouse out to the next field, the error message goes away, BUT the submit button doesn't work. to further complicate the situation, if i load and fill out a form with a 'non-registered' address, the submit button doesn't work either. it appears that execution of the custom validator disables submit upon entry.
i've played with this for hours, trying all sorts of event manipulation, but nothing works.
i should point out that if the checked value of d_type (see field definition above) is NOT 'S', then everything works as expected.
i am totally baffled as to why following the documentation results in failure.
as it turns out, this was not a problem with parsley at all.
a colleague created the form and the submit button had an id of "submit' which could not allow parsley to resolve the submit handler. under those circumstances, apparently parsley blocks the submit.
who knew?
well now, we know.....
I am trying out with knockout validation.
I understand that i am able to use observable for inputs, i.e
<asp:TextBox ID="TxtName" runat="server" data-bind="value:Name"></asp:TextBox>
var self = this;
self.Name = ko.observable().extend({ required: { message: "Please enter your name." } });
but what if i am going to do a validation for a telerik radcaptcha
<telerik:RadCaptcha ID="RadCaptcha" runat="server"></telerik:RadCaptcha>
Am i able to do an observable to check if the radcaptcha is valid and display a message if its not?
For security reasons it is not possible to perform a client-side check on the Telerik RadCaptcha control. Think about it, if client side validation was enabled it would be possible to create a program to bombard the input with responses until the correct one was found.
See Telerik Forum Posts:
http://www.telerik.com/community/forums/aspnet-ajax/captcha/rad-captcha-client-side-validation.aspx
http://www.telerik.com/community/forums/aspnet-ajax/captcha/client-side-support-needed-for-radcaptcha.aspx
I am adding a whole bunch of Jquery validation rules dynamically. I am getting error because some of the textboxes are hidden based on user selection on the page before and therefore do not exist on the page. How do I check if the textbox exists before adding the validation rules?
Here are the validation rules being added:
$('[id$="txtLastName"]').rules('add', {
isSpecialChar: true,
maxlength: 13,
oneOrBothEntered: "txtFacility",
messages: {
oneOrBothEntered: "Either Provider Name or Facility Name must be entered"
}
});
$('[id$="txtFirstName"]').rules('add', {
isSpecialChar: true,
maxlength: 11,
conditionallyRequired: "txtLastName",
messages: {
conditionallyRequired: "This field is required."
}
});
...and a whole bunch more. So say txtLastName was hidden, this code breaks. How do I check first if txtlastname exists before adding the rules?
EDIT:
Per #sparky's comment, adding HTML for fields:
<div class="container1">
<span class="span150Padded">Last</span>
<asp:TextBox ID="txtLastName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
<div class="container1">
<span class="span150Padded">First</span>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
The reason I am adding the rules dynamically is because I am using master pages so my fields are renamed. I couldn't use the <%=textbox.ClientID%> method because my validation is in a separate js file which is referenced and called from my aspx page, and a js file won't recongnize something like that. After alot of back and forth, I have found that the cleanest solution was to add the validation rules dynamically.
If you have another suggestion for me, please let me know.
When using the jQuery Validate plugin or any of its methods, the plugin will not target all elements if your selector targets more than one element.
Use the jQuery .each() method to target all elements.
$('[id$="txtLastName"]').each(function() {
$(this).rules('add', {
...
});
});
EDIT:
If you want to avoid using .each(), then target the one element.
$('#justOneField').rules('add', {
...
});
Per the documentation
$("#myform").validate({
ignore: ":hidden"
});
I have a form on a web page, with one field to enter a code, to search for a property.
On clicking 'submit' I want to be able to run a script in the background without leaving the page.
The script will need to run a MYSQL statement which will have one of these results:
The property code does not exist, so display a Javascript Alert saying it does not exist.
The property is for sale, so call an existing javscript function 'saleSubmit(propertyCode)' to overwrite the exsiting web page with a new page sale.php for that property code
The property is for rent, so call an existing javscript function 'rentSubmit(propertyCode)' to overwrite the exsiting web page with a new page rent.php for that property code
The property is for sale and rent, so display 2 checkboxes within a div on the page to choose either the sales details or the rental details.
Can anybody point me in the right direction here?
Hi Nick - I think I screwed the system up a bit as I initially posted a question, then created an account which would not let me comment on the thread.
The status of the query is as simple as: does not exist, sale, rent, sale & rent
Extra advice would be really appreciated as I am problems googling for examples or a tutorial to point me in the right direction.
I first took this approach when I was looking at this problem to check that the form and Select statement were working correctly. So my form code looked like this:
<form name="idsearch" action="" method="post" onsubmit="xmlhttpPostForm('includes/idsearch-response.php', 'idsearch', 'idSearchResult', '<img src=\'images/loading.gif\'>'); return false;">
<input type="text" id="idRefNo" name="idRefNo" value="Enter Property Code" onfocus="this.value='';" />
GO <input type="image" src="img/template/search2.gif" alt="Click to Search for Properties"/>
and the php code called looked like this:
$idRefNo = $_POST['idRefNo'];
$query = "SELECT DISTINCT * FROM property WHERE property.Title = '".$idRefNo."' AND suspend != 'Yes'"; $result = #mysql_query ($query);
if ($result) { // If the query runs ok
if ($result != "") {
while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
if ($row["BaseRental"] > 0 AND $row["Saleprice"] > 0) {
echo 'This property is for RENT and for SALE <br/>';
} else if ($row["BaseRental"] > 0) {
echo 'This property is for RENT only <br/>';
} else if ($row["Saleprice"] > 0) {
echo 'This property is for SALE only <br/>';
} else {
echo 'DOH! What is going on here!!! <br/>';
}
}
As I said above I would appreciate it if you could point me in the right direction to achieve what I want to do at the beginning of this thread.
First of all let's differentiate between the page(client) and your mysql database(server). Your page will have to send some request to your server which triggers a script to query the database. The result of that query is returned as a response to your page.
You could send a request by using javascript and the xmlhttprequest or try jquery which offers very simple methods to make requests ($.ajax(...)).
Your server and the script which queries your db should then return some meaningful status back to your client which has to interprete the result: Doing alerts, showing your div or whatever you'd like to do. I suggest returning the response as json which can be directly used in javascript without any parsing hassle. If the status of your query as simple as: does not exist, sale, rent, sale & rent. You could go as far and encode those as plaintext numbers, no json needed.
I'm pretty new to this so here goes...
I'm using Visual Studio 05 (C#) and in my program I have a textbox and a submit button. The user enters an email address and results are then displayed from the database (this works) using an ASP gridview control.
What I am after is a simple piece of validation that if nothing has been entered into the textbox, display a message (or a popup) to say that something needs to be entered.
Many thanks!
Use the RequiredFieldValidator.
<asp:RequiredFieldValidator ID="Id1" runat="server" ErrorMessage="*" ValidationGroup="1" ControlToValidate="txt_Test" />
<asp:TextBox runat="server" ID="txt_Test" />
You can use the CustomValidator for displaying a popup, just provide it your own javascript function.
On the client side this bit of jQuery code could help
$(function(){
$('#id_of_form').submit(function(e){
if($.trim($('#id_of_textbox').val()) === '') {
alert('Textbox cannot be empty');
return false;
}
return true;
});
});
If you're using WinForms, you can do the following:
if (String.IsNullOrEmpty(txt_Test.Text.Trim()))
{
MessageBox.Show("You must enter something.");
}