Disable an input after click and validation occurs - javascript

I'm trying to disable an input in a form, but only after validation of fields.
function valJomclAddForm() {
f = document.jomclForm;
document.formvalidator.setHandler('list', function (value) {
return (value != -1);
});
if (document.formvalidator.isValid(f)) {
if(document.getElementById('membership6') === null) {
return false;
}
jQuery('input#submit').val('Publishing...');
jQuery('input#submit').prop('disabled', true);
return true;
} else {
//alert
}
}
but when function gets here:
jQuery('input#submit').prop('disabled', true);
return true;
Function stops, change input value to "Publishing" but doesn't publish, doesn't get the "return true"
Unless I remove jQuery('input#submit').prop('disabled', true);then function return true and publish this...
Why does this not work?
Thanks a lot in advance!

Related

jquery return false killed submit event?

I try to use loop to validate each of every input whether they are filled or not. But end up my submit_form function doesn't get triggered.
$('#submit').click(function(){
var hold = true;
if ($('.tab2').hasClass('active') && hold == true) {
$('.tab-content:visible input').each(function(i, val) {
if ($(this).val() == '') {
alert("Please fill in valid " + $(this).attr('data-error'));
$(this).focus();
hold = true;
return false;
} else {
hold = false;
}
});
return false; //can't remove this
}
submit_form(); //not triggered although all inputs are filled
})
if I removed the return false, there will be no checking..

Can't return form submit to false

So I have a form, and if the input is invalid, I won't let the form pass like so
$(".main-form").submit(function(e){
return false;
});
This won't let the form pass. When the user complete everything correctly I try to do this
$(".main-form").submit(function(e){
return true;
});
But for some reason it stays false all the way though. Any workarounds?
You should use a single submit handler:
$(".main-form").submit() {
if (...) {
return true;
} else {
return false;
}
}
where ... contains your validation checks. The actual code might be somewhat more complex, e.g.
if (field1 is invalid) {
return false;
} else if (field2 is invalid) {
return false;
}
...
} else {
return true;
}
You have to clear the old handler, so you'd initialize it like this:
$(".main-form").on('submit', function(e){
return false;
});
Then to change the handler:
$(".main-form").off('submit');
$(".main-form").on('submit', function(e){
return true;
});

Wait for the return of the loop on form submit

I have the code below, the form is needed to be validated before it can submit the form.
But the problem is, the form continues to submit without validating.
<form action='#' method='post' onsubmit='return validate();'>
function validate()
{
$('form').find(':input:not(:submit,:hidden), select, textarea').each(function(e)
{
$(this).removeClass('redBox');
var rq = $(this).attr('requiredz');
if(rq != undefined)
{
if($(this).val().trim() == '')
{
$(this).addClass('redBox');
$("#errorMsg").html('Red boxes cannont be left empty!');
return false;
}
}
});
});
How to handle the return of a loop?
Dont submit the form once encountered return false on the loop.
try this:
function validate()
{
var passes = true;
$('form').find(':input:not(:submit,:hidden), select, textarea').each(function(e)
{
$(this).removeClass('redBox');
var rq = $(this).attr('requiredz');
if(rq != undefined)
{
if($(this).val().trim() == '')
{
$(this).addClass('redBox');
$("#errorMsg").html('Red boxes cannont be left empty!');
passes = false;
}
}
});
return passes;
});
Do not use return.
$('#my-form').on('submit', function(event){
if (validate() === false) {
event.preventDefault(); // like return false;
}
});
For more information see jQuery submit docs.
Each function has it's own returned value, the default returned value is an undefined value. You should check the length of the invalid elements after the each loop and return a proper value, since you are using jQuery I'd suggest:
$('form').on('submit', function (event)
{
var $invalid = $(this)
.find(':input:not(:submit,:hidden), select, textarea')
.removeClass('redBox')
.addClass(function () {
return this.getAttribute('requiredz')
&& $.trim(this.value) === ''
? 'redBox'
: null;
}).filter('.redBox');
if ($invalid.length)
{
$("#errorMsg").html('Red boxes cannont be left empty!');
return false;
}
});

How I keep a text modified by JavaScript during an AJAX request?

I have a textbox with autopostback = true and I have a JavaScript function to validate it. The JavaScript function also does a little format when the value is OK, but when I call it from PageRequestManager add_beginRequest or add_initializeRequest, the value is changed after the process. How can I do this?
First I control the request:
try {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
}
catch (e) { }
Then I have my handler calling the validation function and I pass the type of validation I want. then precallbackvalidation is my custom validation function and if there is an error, it will reject the partial postback, but if the validation it's OK, the validation function has already made some format inside my textbox which is lost after the postback.
function InitializeRequest(sender, args) {
if (typeof precallbackvalidation == 'function') {
if ($(args._postBackElement).attr("PreCallBackIndex") != null) {
if (!precallbackvalidation(args._postBackElement)) {
args.set_cancel(true);
}
}
}
}
I want to know how to format my text by JavaScript and not losing it after the postback.
<asp:textbox ID="txtRut" runat="server" MaxLength="13" size="13" Width="75px" TabIndex="1" AutoPostBack="true" PreCallBackIndex="rutcte" ></asp:textbox>
On my page I have the textbox with the attribute to trigger the validation, and the validation function.
function precallbackvalidation(obj) {
var index = $(obj).attr("PreCallBackIndex");
if ($(obj).length > 0) {
switch (index) {
case 'rutcte':
return ValidarTipo('rut', obj, true);
break;
case 'ptjegastos':
if (ValidarTipo('entero', obj)==false) {
if (ValidarTipo('real', obj)==false) {
return false;
}
}
return true;
break;
case 'ptjemargen':
if (ValidarTipo('entero', obj) == false) {
if (ValidarTipo('real', obj) == false) {
return false;
}
}
return true;
break;
case 'ptjeppm':
if (ValidarTipo('entero', obj) == false) {
if (ValidarTipo('real', obj) == false) {
return false;
}
}
return true;
break;
case 'ptjecomision':
if (ValidarTipo('entero', obj) == false) {
if (ValidarTipo('real', obj) == false) {
return false;
}
}
return true;
break;
default:
return true;
break;
}
}
else {
return true;
}
}
The ValidarTipo (or ValidateTypes in English) is a generic function in JavaScript which does the format for the 'rut' option; but that format is lost after the all process ends
When I write "19" inside the textbox, the JavaScript function format this text to "1-9", but then when the request process continues after the beginrequest or initializerequest, the AJAX process seems to clear the JavaScripts modifications and let my text back to "19"

using getElementsByName to validate radio button

I'm attempting to validate whether a group of radio buttons is checked in order o validate a form.
function formValidator() {
var triedIt = document.getElementsByName('tried');
if(radioChecked(triedIt, "Please select") {
return true;
}
return false;
}
function radioChecked(elem, helperMsg) {
if(document.myform.tried.checked == 1) {
return true;
}
else {
alert(helperMsg);
elem.focus();
return false;
}
}
This returns the alert, but for some reason the form gets processed anyway. I'm wondering what I'm doing wrong... any help would be appreciated.
If you're wondering why I don't just use jquery etc... its unfortunately not an option. Thanks!
I think it's happening because document.getElementsByName('tried') returns array of elements. So, when you call elem.focus() it will throw error (because array haven't method focus) and js stops execution.
function formValidator(){
var triedIt = document.getElementsByName('tried');
if(radioChecked(triedIt, "Please select")){
return true;
}
return false;
}
function radioChecked(elem, helperMsg){
if(document.myform.tried.checked == 1) {
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
try this i think you skipped one closing bracket ) in if(radioChecked(triedIt, "Please select")) that`s why its happening

Categories