I am using the following html for feeding user name and on losing the focus want the email input field to fill up with username + '#gmail.com'. But the Value setting is not giving the desired result.
HTML code is
<div class="form-group" >
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="name" onfocusout= "seteMail(this)" class="form-control" placeholder="Enter Personal Number as User Name" maxlength="7" value="<?php echo $name ?>" required/>
<span class="text-danger"><?php echo $nameError; ?></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="email" class="form-control" placeholder="Enter AFNET eMail ID" maxlength="40" value="<?php echo $email ?>" required/>
<span class="text-danger"><?php echo $emailError; ?></span>
</div>
</div>
javascript is
function seteMail(thisvalue) {
// window.alert(thisvalue.value);
var tempval = thisvalue.value.toString()+'#gmail.com';
$('#email').val(tempval);
$('#email').html(tempval);
};
<input> is an input field and can never be set externally as it takes input only from the Standard Input that is Keyboard.
I have realised this after lots of H&T Method (H&TM).
Related
How to make bootstrap 5 validation not visible immediately before the user types (oninput)?
Here is the program that I use, but the program immediately provides validation to the user even though the user has not provided input interaction:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="was-validated">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
You shouldn't have .was-validated on the form in the markup. You add that in your validation script.
<form action=" " class="needs-validation">
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load.
https://getbootstrap.com/docs/5.2/forms/validation/#how-it-works
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="needs-validation">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.
I have a shiny app that conducts t-test between two independent samples. Based on a radio button choice, you can either input summary statistics (\bar{x}, sd, n) for both samples, or you can copy/paste or type in the values of each sample. The renderUI function looks something like this:
output$ui<-renderUI({
switch(input$option,
"Summary Stats" =
c(textInput("barx1","$$\\bar{x}_1$$", "0"),
textInput("picksd1", "$$sd_1$$", "1"),
textInput("n1","$$n_1$$","10"),
textInput("barx2", "$$\\bar{x}_2$$","1"),
textInput("picksd2", "$$sd_2$$","1"),
textInput("n2","$$n_2$$","10")),
"Input Data" = c(tags$textarea(id="foo1", rows=10, cols=38), tags$textarea(id="foo2", rows=10, cols=38)))
})
The textInputs render and work fine in the UI, but the text boxes don't, any help here? I have something very similar for a one sample case, where foo1 works fine, the problem seems to be that I want two text boxes and maybe that I have them stored in c() form, though this works fine for the textInputs. Thanks in advance for any help.
I managed to make this work by using html code instead of "tags". Not sure why tags$textarea didn't work when used in c(tags$textarea, tags$textarea) form but this looks a lot cleaner anyway:
output$ui<-renderUI({
switch(input$option,
"Summary Stats" = HTML(
'<div class="form-group shiny-input-container">
<label for="barx1">$$\\bar{x}_1$$</label>
<input id="barx1" type="text" class="form-control" value="0"/>
</div>
<div class="form-group shiny-input-container">
<label for="picksd1">$$sd_1$$</label>
<input id="picksd1" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="n1">$$n_1$$</label>
<input id="n1" type="text" class="form-control" value="10"/>
</div>
<div class="form-group shiny-input-container">
<label for="barx2">$$\\bar{x}_2$$</label>
<input id="barx2" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="picksd2">$$sd_2$$</label>
<input id="picksd2" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="n2">$$n_2$$</label>
<input id="n2" type="text" class="form-control" value="10"/>
</div>'
),
"Input Data" = HTML(
'<div class="form-group shiny-input-container">
<label for="foo1">Sample 1</label>
<textarea id="foo1" rows="10" cols="38"></textarea>
</div>
<div class="form-group shiny-input-container">
<label for="foo2">Sample 2</label>
<textarea id="foo2" rows="10" cols="38"></textarea>
</div>'
))
})
I am trying to use the ng-required in a form.
All I did was add ng-required="true" on my input.
In Chrome, when clicking submit it prevents submission and asks the user to fill the field, as expected. On an iPhone, it doesn't show any error and it executes the submit function.
<form name="addGuest" ng-submit="GLCtrl.addGuest()">
<div class="form-group">
<label for="newGuestFirstName">First Name</label>
<input type="text" id="newGuestFirstName" ng-model="GLCtrl.newGuest.firstName" class="form-control" required="true"/>
</div>
<div class="form-group">
<label for="newGuestLastName">Last Name</label>
<input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" class="form-control" required="true"/>
</div>
<div class="form-group">
<label for="arrivalDate">Arrival Date</label>
<div class="input-group">
<input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="GLCtrl.newGuest.arrivalDate" is-open="opened" required="true" close-text="Close"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="GLCtrl.cancelAdd()"><i class="glyphicon glyphicon-remove"></i></button>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-ok"></i></button>
</form>
You need to check if the form is valid before proceeding to your form submission process. In regards to your problem, you are probably relying on HTML5's required attribute which is added when ng-required is true. This might work on chrome but it partially works in IOS.
See the note on this link
Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.
Solution:
Add novalidate in your form, don't use the HTML5 required attribute messaging which is only useful for some browsers. Show required error message explicitly.
Sample HTML implementation:
<form name="form" ng-submit="submit(form, user)">
<input type="email" required name="email" ng-model="user.email">
<div ng-show="form.email.$error.required>This field is required</div>
<input type="password" required name="password" ng-model="user.password">
<div ng-show="form.password.$error.required>This field is required</div>
<button type="submit">Login</button>
</form>
Sample Controller implementation:
$scope.submit = function(form, user) {
if(form.$valid) { // guard against any errors
// do you login process here..
}
};
Additionally, you can also use the ng-disabled approach to disable the submit button when when form is invalid.
<button type="submit" ng-disabled="form.$invalid">Login</button>
UPDATE:
This update takes into consideration that you are using twitter bootstrap3. By using the following classes: 'has-error' for form-groups and 'help-block' for showing the error messages. By using the ng-class and ng-show directives in showing the errors with angular form validation indicators mentioned in each angular input directives and the FormController and NgModelController documentation and also the guides shown in the developer's guide.
DEMO
HTML
<form name="form" ng-submit="submit(form, guest)" novalidate>
<div class="form-group" ng-class="{'has-error': form.firstName.$invalid && form.firstName.$dirty}">
<label class="control-label" for="newGuestFirstName">First Name</label>
<input type="text" id="newGuestFirstName" ng-model="guest.firstName" name="firstName" class="form-control" required="" />
<div ng-if="form.firstName.$invalid && form.firstName.$dirty">
<span class="help-block" ng-show="form.firstName.$error.required">This field is required</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': form.lastName.$invalid && form.lastName.$dirty}">
<label class="control-label" for="newGuestLastName">Last Name</label>
<input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" name="lastName" class="form-control" required="" />
<div ng-if="form.lastName.$invalid && form.lastName.$dirty">
<span class="help-block" ng-show="form.lastName.$error.required">This field is required</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': form.arrivalDate.$invalid && form.arrivalDate.$dirty}">
<label class="control-label" for="arrivalDate">Arrival Date</label>
<div class="input-group">
<input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="arrivalDate" is-open="opened" name="arrivalDate" required close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div ng-if="form.arrivalDate.$invalid && form.arrivalDate.$dirty">
<span class="help-block" ng-show="form.arrivalDate.$error.required">This field is required</span>
</div>
</div>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-ok"></i>
</button>
</form>
JAVSCRIPT
Controller Logic submit()
var fields = ['firstName', 'lastName', 'arrivalDate'];
$scope.submit = function(form, guest) {
if(form.$valid) {
// form is valid, do you form submission processhere..
} else {
angular.forEach(fields, function(field) {
form[field].$dirty = true;
});
}
};
I am using ZF2, few of my fields are created customarily due to design. While few are created via zend form. THe thing is that when i post data i get only those fields posted that are created via ZF2 form e.g my username field, gender, title. Rest of fields are not posted. Here is the snippet to my code
<?php
$form = $this->form;
$form->prepare();
echo $this->form()->openTag($form);
?>
<div class="featureBox">
<div class="profile_address">
<div class="main">
<div class="address_head"><h4><?php echo $form->get('username')->getValue(); ?> > Account Detail</h4></div>
<div class="field_set">
<div class="field_input">
<label><?php echo $form->get('username')->getLabel(); ?></label>
<div class="field"><input type="text" readonly="readonly"value="<?php echo $form->get('username')->getValue(); ?>"></div>
</div>
<div class="field_input">
<label><?php echo $form->get('email')->getLabel(); ?></label>
<div class="field"><input type="text" value="<?php echo $form->get('email')->getValue(); ?>"></div>
</div>
</div>
</div>
<div class="field_set">
<div class="field_input">
<?php echo $this->formRow($form->get('gender')->setAttribute('class', 'stylish-select')); ?>
</div>
</div>
<div class="field_set">
<div class="field_input">
<?php echo $this->formRow($form->get('title')); ?>
</div>
</div>
<div class="free-btn">
<input type="submit" value="Save" onclick="return validatePassword();"/>
<input type="button" value="Back" class="button" onclick="window.location='<?php echo $this->url('admin_administrator'); ?>';return false;" />
</div>
</div>
</div>
</div>
<?php
$this->form()->closeTag();
?>
Any idea on whats getting wrong i can over come this if i use
$this->formRow()
with all fields but if i use this it will ruin my design requirements.
Your inputs don't have a name attribute, for example
<input type="text" value="<?php echo $form->get('email')->getValue(); ?>">
Should be
<input type="text" name="email" value="<?php echo $form->get('email')->getValue(); ?>">
missing------------^