Simple textbox validation - display message is nothing is entered - validation

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.");
}

Related

Unable to get international number with intl-tel-input and webform

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

knock out observable for telerik radcaptcha

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

How can I change the style of a div on return from a form submit action in Razor MVC3?

I have a Razor/ASP/MVC3 web application with a form and a Submit button, which results in some action on the server and then posts back to the form. There is often some delay, and it's important that users know they should wait for it to complete and confirm before closing the page or doing other things on the site, because it seems users are doing that and sometimes their work has not been processed when they assume it has.
So, I added a "Saving, Please Wait..." spinner in a hidden Div that becomes visible when they press the Submit button, which works very nicely, but I haven't been able to find a way to get the Div re-hidden when the action is complete.
My spinner Div is:
<div id="hahuloading" runat="server">
<div id="hahuloadingcontent">
<p id="hahuloadingspinner">
Saving, Please Wait...<br />
<img src="../../Content/Images/progSpin.gif" />
</p>
</div>
</div>
Its CSS is:
#hahuloading
{
display:none;
background:rgba(255,255,255,0.8);
z-index:1000;
}
I get the "please wait" spinner to appear in a JS method for the visible button, which calls the actual submit button like this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
});
And my view model code gets called, does things, and returns a string which sets the usermessage content which shows up fine, but when I tried doing some code in examples I saw such as:
// Re-hide the spinner:
Response.write (hahuloading.Attributes.Add("style", "visibility:hiddden"));
It tells me "hahuloading does not exist in the current context".
Is there some way I am supposed to define a variable in the view model which will correspond to the Div in a way that I can set its visibility back from the server's action handler?
Or, can I make the div display conditional on some value, in a way that will work when the page returns from the action?
Or, in any way, could anyone help me figure out how to get my div re-hidden after the server action completes?
Thanks!
Is this done with ajax? I would assume so because the page is not being redirected. Try this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
$("#hahuloading").ajaxStop(function () {
$(this).hide();
});
});
As an aside, you no longer need runat=server.

jQuery.validate stops my form from being submitted

jQuery.validate stops my form from being submitted. I would like it to just show the user what is wrong but allow them to submit anyway.
I am using the jquery.validate.unobtrusive library that comes with ASP MVC.
I use jquery.tmpl to dynamically create the form and then I use jquery.datalink to link the input fields to a json object on the page. So my document ready call looks something like this.
jQuery(function ($) {
// this allows be to rebind validation after the dynamic form has been created
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($("form"));
// submit the answers
$("form").submit(function(e) {
$("input[name=jsonResponse]").val(JSON.stringify(answerArray));
return true;
});
}
I note that there is an option
$("form").validate({ onsubmit: false });
but that seems to kill all validation.
So just to recap when my form is rendered I want to show all errors immediately but I don't want to prevent the submit from working.
So after some research (reading the source code) I found I needed to do 2 things
add the class cancel to my submit button
<input id="submitButton" type="submit" class="cancel" value="OK" />
This stops the validation running on submit.
To validate the form on load I just had to add this to my document ready function
$("form").valid();
Hope this helps someone else

How can I stop a form from processing/submitting that is using jquery AJAX submission?

I have a form with two buttons, a submit button and a cancel/close button. When the user clicks submit, the entered data is validated using http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/. If everything validates, the form is submitted with jQuery/AJAX. That all works fine and dandy. I run into problems with the cancel button though. I want the cancel button to require confirmation. If the user chooses to proceed, they are taken to a page of my choosing. If they decide they don't want to cancel, then they are simply left on the page. It's the last part that isn't working.
My form code looks like this:
<form name="createPage" id="createPage" method="post" action="pager.php" class="ajax updateForm">
<input name="whatever" type="text" />
<button type="submit" id="submitQuickSave" class="submitSave"><span>save</span></button>
<button type="submit" id="submitCancel" class="submitClose" onclick='confirm_close()'><span>close</span></button>
</form>
My current cancel script looks like the following. If the user does indeed want to cancel, I unbind the form submit so that validation isn't executed. The form then proceeds to submit and includes cancel as a parameter in the action attribute. I handle the cancellation server side and direct the user to a new page.
function confirm_close()
{
var r=confirm("All changes since your last save operation will be discarded.");
if (r==true)
{
$(".ajax").unbind("submit");
}
else
{
}
}
I cannot figure out what to put in the 'else' argument. What happens is that if the users cancels the cancellation (i.e., return false), then the form still tries to submit. I cannot make it stop. I've tried several things from this site and others without success:
event.stopImmediatePropogation
.abort()
Any ideas? Basically, how can I get the cancel/close button work properly?
Consider separating your JavaScript from your HTML. With this in mind, you could write the handler for your the click event you're trying to intercept like this:
$("button#cancel").click(function($event) {
var r = confirm("All changes since your last save operation will be discarded.");
if (r) {
$(".ajax").unbind("submit");
}
else {
$event.preventDefault();
}
});
You would have to tweak your HTML and add an id attribute to the cancel button:
<button id="cancel" type="submit" value="cancel">Cancel</button>
Example here: http://jsfiddle.net/wvFDy/
Hope that helps!
I believe you just
return false;
Let me know if this works.

Resources