jquery validation rules not working properly - javascript

I created an update form wherein you can update each field individually. One of my fields is for password reset. I've been trying to use the jquery function validate to make validations for this field. I've tested in jsfiddle and the code works perfectly. Strangely however, when I run my actual php script, the validation messages don't appear to work. My the code in jsfiddle, is pretty much the same as the one in my php script (Except for the value of the password field. Here's the snippet from my script:
<form method="POST" id="update_password">
<div>
<label>Password:</label>
<input type="password" id="user_password" name="user_password" value="if(isset($_POST['user_password'])){ echo $_POST['user_password']; } else { echo $session_username; }" />
<input type="submit" value="Submit" id="submit_password"/>
</div>
</form>
So my question is pretty much simple, how come this code snippet works on jsfiddle but not on my actual php script when I run it in localhost? Can someone please point me to the right direction?

I think you forgot to put the PHP opening and closing tags.
<form method="POST" id="update_password">
<div>
<label>Password:</label>
<input type="password" id="user_password" name="user_password" value="<?php if(isset($_POST['user_password'])){ echo $_POST['user_password']; } else { echo $session_username; }?>" />
<input type="submit" value="Submit" id="submit_password"/>
</div>
</form>
Also I'm not sure why you would want to print the "session_username" in the password field...

Related

Codeigniter - Chrome autofill change input value after submit

Is quite simple but very strange.
I'm using Codeigniter, i've an App where an User can create other users and then change their passwords.
For this reason i've a simple form as the following:
<form action="<?php echo site_url("Manage/changeUserPassword"); ?>" method="post">
<input hidden class="inputwithiduser" type="text" name="iduser" value="">
<input type="password" id="inputPasswd" name="password" placeholder="New password" value="">
<button type="submit">Save</button>
</form>
I fill the first input (with class inputwithiduser) with JQuery.
Inspectioning, these inputs have the correct values. BUT.... AFTER SUBMIT my controller retrieve as $this->input->post("iduser"); the value that Chrome has saved as Username for my personal login. In other words, CHROME is changing my input (despite inspecting the iduser input with Chrome tool it's all okay) after submit!
Have you any ideas? I tried with autocomplete="off", autocomplete="false", etc without success.
Thank, Luca
Have you tried autocomplete="foo" (or whatever value)? New browsers use this attribute different as they used it before
I have the same issue, and finally i solved by this:
<input type="text" name="username" hidden/>
<input type="password" name="password" hidden/>
add two input before your oiriginal input.

Replace html5 bubble messages with message under fields

I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?
<script type="text/javascript">
$(document).ready(function() {
$('#emailform').submit(function(event) {
event.preventDefault();
$.ajax({
backedn validation
}
});
});
});
</script>
<body>
<form id="emailform" class="laform" method="post" action="*.php">
<label>Email*: </label>
<input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">
<label class="col-md-12 labelcom">MSG</label>
<textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>
<button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>
</form>
</body>
Overriding the HTML required message is not possible. More Information.
Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.
Edit: After doing more research I found another SO post that contained more insightful information.
Apparently, it is possible. But you will have to use Javascript.
This code changes the message of the validation box the HTML required provides. You should probably look up browser support.
document.getElementById("input").setCustomValidity("Message");

How to prevent a form from opening action url and only print when submitted?

i am building a form and when i submit it it opens the action url. I want to submit the form on click button which should not open the target url but submit the request. as well as i want to print a message after submit and form should be cleared after submit.
<form id="contact" action="https://control.msg91.com/api/sendhttp.php" method="post">
<h3>Send SMS</h3>
<h4>Build in Process</h4>
<fieldset>
<input name="authkey" type="hidden" value="auth key as required"/>
<input name="mobiles" placeholder="Mobile Number" type="text" tabindex="1" maxlength="10" required >
</fieldset>
<fieldset>
<textarea name="message" placeholder="Type your message here...." tabindex="2" maxlength="320" required></textarea>
</fieldset>
<input name="sender" type="hidden" value="FAKEin" />
<input name="route" type="hidden" value="4" />
<input name="country" type="hidden" value="0" />
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
any help how can i do this?
also can i add a hidden text in message tab that should add to the message tab in post/get as + instead of &
eg. actionurl.php?authkey=custommade&mobiles=9999999999&message=orginal+message+hidden+message&sender=FAKEin&route=4&country=0&submit=
You can also check the source code of page https://www.tricksbygoogle.com/sms/sms.php
Basically You can't .
The only solution here I see , is using ajax query and use javascript to clear form.
This example I provide is no redirections at all. What means you page will not be reloaded.
Maybe little jquery will help.
var result_func = function(response){
if(response.allOk){
$this.reset();
}
}
$('#contact').submit(function(e){
e.preventDefault()l
var $this = $(this);
var data = $this.serialize();
$.post($this.attr('action'),data,result_func.bind($this));
});
Header location will work , but user still will be redirected.
Based on your question, and the comments it looks like you're going to have to do a little bit of research. Here are some tips though.
If you would like to include the functions from a page without actually visiting the page, than you can use what is called an include statement. This will keep the browser from visiting that page while still executing it. - http://php.net/manual/en/function.include.php
To display a message you're going to need to hide and show the element with javascript. I would suggest viewing this question - Hide div after a few seconds
Basically on submit, you're going to want to check for the variables from your form. You would run a php if statement.
Then, if those variables exist you are going to want to include your action page.
In the same if statement, you're going to want to echo a <div> with a class that has some javascript attached to it to hide it after a few seconds.
The form will automatically clear on submit.
if($variable != null){
include '/action.php' // --- you can add some GET variables to the end of this if you would like to.
echo '<div id="message">Message sent</div>'
}

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

jQuery.validationEngine v2.6.1 Not Validating?

I can't tell what I have done wrong here.
This part seems to be working, or at least it fires, because a breakpoint set with the debugger breaks in the code.
<script>
jQuery("#contactForm").validationEngine();
</script>
But it doesn't seem to be hooked up to the form fields and doesn't attempt to validate, or validates improperly, when used like this:
<form class = "contactform" id = "contactForm">
<fieldset>
<div class="contactform-email contactform-field">
<label class="contactform-label" for="contactform-email">Email Address:
<br>
</label>
<input class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="email" />
</div>
<input class="contactform-button" type="submit" name="submit" value="Send"/>
</fieldset>
</form>
Is there something I've mis-configured?
Bob
OK, I finally solved it.
The thing is that this code is running within the Meteor JavaScript framework and it expects code such as
jQuery("#contactForm").validationEngine();
To be in a Template.myTemplate.rendered function to execute properly and at the right time.
Still learning...

Categories

Resources