HTML input required fields don´t work - html

I have one small web app for learning purposes, and I realised "required" attribute doesn´t work, and I can´t find why. It happens on many browsers, so I guess it is not a browser problem.
Things I tried:
Check <!DOCTYPE html> tag is included
Semi-closed the input tags (but deleted that since I have read here it could make some browsers to work in a wrong way).
Check no value attribute is included, since it could make the required attribute be useless
Just to test, put the input button out of the enclosing tags
The two forms seem to be properly closed
Links I looked:
HTML input required attribute not working for a field
html required tag doesn't work for form submission
textarea's "required" attribute doesn't work even though the value is empty
'Required' attribute not working
Required attribute doesn't work
And many others
My code:
index.php
<?php
session_start();
require_once('models/UsuarioPDO.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/form-styles.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/cookies.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<!--jquery always bwfore bootsrap, sine bootsrap need it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" >
<script src="/bootstrap/js/bootstrap.min.js" defer></script>
<script src="controls/registerSubmit.js" defer></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<?php
/*if there is the two cookies, we start the session with the user
who belog the data of that cookie*/
if(isset($_COOKIE["id_usuario_myreminder"]) && isset($_COOKIE["random_number_user_myreminder"]))
{
$usuarioAlogear= usuarioPDO::getUserWhenCookie($_COOKIE["id_usuario_myreminder"],$_COOKIE["random_number_user_myreminder"]);
$_SESSION["usuario"]=$usuarioAlogear;
}
/*if there is user logged in, back to main*/
if(isset($_SESSION["usuario"]))
{
header('Location:views/main.php');
exit;
}else
{/*if there is not logged user, show index components*/
/*is comes from registerUser.php but was not possible to insert the user due to repeated email,
we send a session variables here to make this page show a flag, then we destroy the session
to ensure it won´t appear again*/
if( (isset($_SESSION["mailrepetido"]))&&($_SESSION["mailrepetido"])==true )
{
?>
<div class="alert alert-danger" role="alert">
E Mail already exists for another user
</div>
<?php
session_destroy();
}
/*if login attempt was wrong, another flag*/
if( isset($_SESSION["wrongLogIn"]) )
{
if($_SESSION["wrongLogIn"]==true)
{
?>
<div class="alert alert-danger" role="alert">
wrong login
</div>
<?php
session_destroy();
}
}
/*if session is closed*/
if( isset($_SESSION["closedSession"]) )
{
if($_SESSION["closedSession"]==true)
{
?>
<div class="alert alert-info">
Closed Session
</div>
<?php
session_destroy();
}
}
?>
<?php include("views/view_login_register_forms.php"); ?>
<br><br>
<?php include("views/view_footer.php"); ?>
<?php
}/* end else*/
include('views/view_cookies-banner.php');
?>
</body>
</html>
view_login_register_forms.php
<div class="container">
<div class="card bg-light">
<article class="card-body mx-auto" style="max-width: 400px;">
<h4 class="card-title mt-3 text-center">MY REMINDER</h4>
<img src="assets/imagenes/bombilla.svg" class="img-responsive" alt="man_and_bulb">
<p class="divider-text">
<span class="bg-light">LOG IN </span>
</p>
<?php /* remember action path will be called from index*/ ?>
<form id="formLogIn" method="post" action="controls/loginUser.php">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="email-Input-Name" class="form-control" placeholder="Email address" type="email" required>
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name="password-Input-Name" class="form-control" placeholder="Enter password" type="password" required>
</div> <!-- form-group// -->
<!--remember me checkbox-->
<div class="form-group input-group">
<input name="remember-Input-Name" id="id_remember_checkbox" type="checkbox" value="remember"> <label for="id_remember_checkbox" id="id_label_remember">Remember me</label>
</div> <!-- form-group// -->
<p>
<button type="submit" class="btn btn-primary" id="loginButton">Log in to your reminder</button>
</p>
</form>
<p class="divider-text">
<span class="bg-light">OR REGISTER</span>
</p>
<?php /* remember action path will be called from index*/ ?>
<form id="formRegister" method="post" action="controls/loginUser.php">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="newUserName" class="form-control" placeholder="Name (required)" type="text" required>
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="email-Input-Name" id="id_email-Input-Name" class="form-control" placeholder="Email address (required)" type="email" required>
</div> <!-- form-group// -->
<label for="password-Input-Name">Password must be between 8-20 characters</label>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name= "password-Input-Name" id="id_password-Input-Name" maxlength="20" class="form-control" placeholder="Password (required)" type="password" required>
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name="newUserPassRepeat" id="id_newUserPassRepeat" maxlength="20" class="form-control" placeholder="Repeat password (required)" type="password" required>
</div> <!-- form-group// -->
<input name="registerUserInputName" type="hidden" value="true">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" id="registerButton"> Create Account </button>
</div> <!-- form-group// -->
</form>
</article>
</div> <!-- card.// -->
</div>
<!--container end.//-->
The app is here
https://myreminder.avanzartewebs.com/index.php
You can check how, for example, if you include en ampty email, it says things like "E mail already exists for another user" if there is an already created user with an empty email, and it should never be submitted when that happens.
The thing is, when I was developing it, I think required attribute worked... but it stopped working and I don´t know why or when.

I found part of the solution on this post
html5 required validator not working with input type=button
That's because the required validator is only called on submit
I had this code on another file that was causing the error:
$("#registerButton").click(function(e){
e.preventDefault();
//some code
}
What I did is to start working on the submit() event of the form, and not on the click() event of the button.
I found on this post, which helped me a lot.
Submit form after calling e.preventDefault()
I discovered it was a better idea to move the e.preventDefault() to the condition were validation is not right, so I could avoid the submit action only in case the condition is not true.
This is the resulting code which seems to be working now:
$(`#formRegister`).submit(function(e){
//e.preventDefault(); NOT HERE
let newPass=$(`#id_password-Input-Name`).val();
let repeatPass=$(`#id_newUserPassRepeat`).val();
let tamanioNewPass=newPass.length;
let tamanioRepeatPass=repeatPass.length;
/*if passwords are the same, and have minimun 8 characters, ok (16 characters maximum is controlled with html)*/
/*it is only neccesary to test if one of them is >= 8 , because if they are the same and one of them is >=8, the other is equal valid too*/
if((newPass===repeatPass) && (tamanioNewPass>=8) )
{
$(`#formRegister`).submit();
}
else
{
e.preventDefault(); //if pass is wrong, don´t submit!
alert(`could not be possible to do registration submit`);
}
});

Related

Get data from database based on search by name(Input field) in Laravel

I have an issue with Laravel. I have a page where two fields are given; one is a select option in which two parameters are given (name, PRN). Below this, I have an input field and submit button.
When the user writes the name in the input field and searches. It should get data from that user on the next page in table format.
receipt.blade.php
<body>
<div class="form_design">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<h1 class="mt-0 text-center mb-4 text-white">Get Receipt</h1>
<p style="text-align: left; margin-bottom: 0px !important;">
Home </p>
<div class="boxed_shadow">
<h5><span class="question-label active">Search your transactions for Receipt</span></h4>
<form action="{{url('/')}}" id="submit_form" method="POST" >
#csrf
<div class="alert alert-danger" id="RegisterAlert" role="alert" style="display:none">Record not found.</div>
<div class="form-group">
<select class="form-control" id="tran_type">
<option value="pg_res_txn_id">PRN</option>
</select>
</div><!-- /input-group -->
<div class="form-group">
<label><span class="star_vld">*</span>Search Based On PRN</label>
<input type="text" class="form-control" id="MainContent_TextBoxEmpId">
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-sm px-5" id="MainContent_ButtonSearch" value="Search" style="background-color: #c2d3c8;font-size: 14px;font-weight: 600;">
</form>
<form id="receipt_list" method="POST" style="display:none" >
<table id="rec_list" border='1' class="table">
</table>
</form>
</div>
</div>
</div>
</div>
</div>
ReceiptController.php
class ReceiptController extends Controller
{
public function index()
{
return view('receipt');
}
}
Please give me the solution for this. If anyone wants more data, I can share it with you want to get data based on search and display it on the next page. Data should be from the database; my table name is 'form2s'.
I didn't get the result. I tried but did not get a result.
I have been working on Laravel for the last three months.

Cannot read property 'setValue' of undefined | Angular

I am having an issue with my HTML component, for some reason the my method is displaying an error:
Cannot read property 'setValue' of undefined when I click the edit button, however everything seems to be ok.
This is my HTML
<div *ngFor="let item of currentUser.myExperiences" class="mt-3">
<div>
<h6>{{item.companyName}} <span *ngIf="item.currentlyWorking" class="badge badge-warning">Currently
working</span>
<span class="float-right">
<a class="text-warning cursor" (click)="openEditModal(item)"><i class="fas fa-pencil-alt"></i></a>
</span>
</h6>
<p class="text-muted p-text-sm">{{item.functions}}</p>
<p class="text-muted p-text-sm" *ngIf="item.references">
<strong>References:</strong>
{{item.references}}
</p>
<hr>
</div>
</div>
<form role="form" [formGroup]="updateForm">
<div class="form-group">
<label for="functions">Funtions</label>
<input type="text" class="form-control" id="functions" name="functions" formControlName="functions" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
This is my TS component:
public openEditModal(myExperience: IMyExperience): void {
console.log(myExperience);
// Set values to controls
console.log(myExperience.id);
this.experienceId.setValue(myExperience.id);
this.companyName.setValue(myExperience.companyName);
this.functions.setValue(myExperience.functions);
this.workedYears.setValue(myExperience.workedYears);
this.references.setValue(myExperience.references);
this.currentlyWorking.setValue(myExperience.currentlyWorking);
this.updateForm.setValue({
experienceId: this.experienceId.value,
companyName: this.companyName.value,
functions: this.functions.value,
workedYears: this.workedYears.value,
references: this.references.value,
currentlyWorking: this.currentlyWorking.value
});
// Open the modal
this.modalRef = this.modalService.show(
this.editModal,
Object.assign({}, { class: 'gray modal-lg' })
);}
I tried displaying in console the object, but it works perfectly, however I am not sure why this is happening.
I use resolvers to pass information from the route to the component properly.
Thanks in advance.
Try to use this.updateForm.patchValue instead of this.updateForm.setValue.

Get values of dynamic input fields

I have this HTML template:
<div class="container">
<div class="row">
<div class="col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Link </label>
<input type="text" class="form-control" id="field-name" placeholder="Link"
[(ngModel)]="HrefLink" name="HrefLink">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-value">Label</label>
<input type="text" class="form-control" id="Label" placeholder="Label"
[(ngModel)]="HrefLabel" name="HrefLabel">
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div> <!-- /div.form-inline -->
</div> <!-- /div[data-role="dynamic-fields"] -->
</div> <!-- /div.col-md-12 -->
</div> <!-- /div.row -->
</div>
In this simple form, I can add one or more inputs. This is the live example: https://bootsnipp.com/snippets/VPRlZ
My question is: How can I get the values of all added fields inside my angular component ? I can add the directive ngModel like above in every input but then all directives will have the same name and I'll not get all values?
Unfortunately, I can't place the ngModel in a higher level in the div of form-group ...
Please tell me if my question is clear or you need more information.
Why not you base the quantity of input in an array of Objects(InputModel it is a custom interface or class) and finally use *ngfor to show them.
InputModel
{
input_value: string,
index_of: number,
isDelete: boolean, //if false is "+" if true is "x"
}
Component.ts
inputValues: InputModel[] = [];
count: number = 0;
OnInit{
this.inputValues.push({
input_value:"",
index_of: this.count,
isDelete: true
});
}
addMore(){
this.inputValues.push({
input_value:"",
index_of: this.count++,
isDelete: false
});
}
Html Template
<div *ngFor="let input of inputValues">
<input [(ngModel)]="input.input_value" />
<!-- TODO button with 'x' or '+' depends of input.isDelete -->
</div>

Design issue with the bootstrap based form in iphone browser

I have a blog page where user can post comments, comment form shows up as a bootstrap modal when user click on a link or button.
This website is designed in asp.net webform just in case information is helpful
Since i cant put all the code i have just put related code of the page with css & JS.
This form works fine on Desktop browser and also on samsung browser but same breaks on iphone.
Form has multiple fields for input Name, Email, Country, Comments etc
When i start to enter Name cursor show below the Name inputbox and when i enter email cursor show almost two row below the email input feild..
I am adding screen for reference and also Codepen link
1[]2
I am not sure why it is breaking as i am not able to debut it in Iphone
<div class="modal fade in" id="commentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Comment</h4>
</div>
<div class="modal-body">
<!--- UpdatePanel -->
<div id="MainContent_UpdatePanel1">
<!--- Code -HERE -->
<div id="MainContent_pnlForm">
<div class="comment-intro-w">
<span id="MainContent_lblCommentMsg" class="txtLabelComment">All fields are mandatory.</span>
</div>
<div data-val-validationgroup="vgCommentForm" id="MainContent_vsCommentForm" class="validation-sum" data-valsummary="true" style="display:none;">
</div>
<div class="comment-fullname-w">
<input name="ctl00$MainContent$txtCommentFullName" id="MainContent_txtCommentFullName" tabindex="1" class="txt-comment-fn" placeholder="Full Name" type="text">
<span data-val-controltovalidate="MainContent_txtCommentFullName" data-val-errormessage="Name can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfv1" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Name can't be blank</span>
</div>
<div class="comment-email-w">
<input name="ctl00$MainContent$txtCommentEmail" id="MainContent_txtCommentEmail" tabindex="1" class="txt-comment-fn" placeholder="Email" type="text">
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Email can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Email can't be blank</span>
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Enter correct email" data-val-validationgroup="vgCommentForm" id="MainContent_revEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
data-val-validationexpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" style="visibility:hidden;">Enter correct email</span>
</div>
<div class="comment-country-w">
<select name="ctl00$MainContent$ddCountry" id="MainContent_ddCountry" tabindex="3" class="dd-comment-country">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
</select>
<span data-val-controltovalidate="MainContent_ddCountry" data-val-errormessage="Select Country" data-val-validationgroup="vgCommentForm" id="MainContent_rfvddC" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Select Country</span>
</div>
<div class="comment-message-w">
<textarea name="ctl00$MainContent$txtCommentMessage" rows="5" cols="20" id="MainContent_txtCommentMessage" tabindex="4" class="txt-comment-msg" placeholder="Message"></textarea>
<span data-val-controltovalidate="MainContent_txtCommentMessage" data-val-errormessage="Message can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvmsg" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Message can't be blank</span>
</div>
<div class="comment-anonymous-w">
<span class="chk-anonymous"><input id="MainContent_cbAnonymous" name="ctl00$MainContent$cbAnonymous" type="checkbox"><label for="MainContent_cbAnonymous">I wish to be anonymous. Do not publish my name with my comment.</label></span>
</div>
<div class="comment-btnsave-w">
<input name="ctl00$MainContent$btnSaveComments" value="Post Comment" onclick="ClientSideClick(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnSaveComments", "", true, "vgCommentForm", "", false, true))"
id="MainContent_btnSaveComments" class="buttonPopups" type="button">
</div>
</div>
<!--- Code -HERE -->
</div>
<!--- UpdatePanel -->
</div>
</div>
</div>
</div>
I found the solution it seems to work .modal-open { position: fixed; width: 100%; }
It seems like a bug in iOS. Any other solution is welcome
Personally, position: fixed scroll to top automatically. Quite annoying !
To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.
For the javascript/jQuery
$(document).ready(function() {
// Detect ios 11_0_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0_1|OS 11_0_2|OS 11_0_3|OS 11_1/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
}
For the CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
Reference Source iOS 11 Safari bootstrap modal text area outside of cursor

Validate date field

I am trying to disable the save button untill date is not picked. it is disabled but its not able to enbale untill i dont press any key from the keyboard.please tell me what i am doing wrong and thanks in advance.
<div class = "form-group" ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
<label for = "fromTime"> From Time:
<img src = "images/required.gif" alt = "Required" class = "required-star">
</label>
<div class='input-group date' id='fromTime' >
<input type='text' class="form-control" name="fromTime" ng-model = "fromTime" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine" class="help-block">From Time is required.</p>
</div>
<button type="button" class="col-sm-2 btn btn-primary" ng-click="scheduleCall()" style="margin-left:10px;" ng-disabled="Form.$invalid"> Save </button>
change:
ng-disabled="Form.$invalid"
to:
ng-disabled="Form.fromTime.$invalid"
You have to use like below
ng-disabled="Form.fromTime.$invalid"
Formname: Form;
Input field name : fromTime;
Input field state: $invalid
If i understand your problem correctly, you need to use a date input.
Now save button will be disabled until a valid date is picked.
function Ctrl($scope) {
$scope.fromTime = '';
$scope.scheduleCall = function() {};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="Form">
<div class="form-group"
ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
<label for="fromTime">From Time:</label>
<div class='input-group date' id='fromTime'>
<input type='date' class="form-control" name="fromTime" ng-model="fromTime" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine"
style="font-size: 11px; color: red;">
From Time is required.
</p>
</div>
<button type="button" ng-click="scheduleCall()" ng-disabled="Form.$invalid">Save</button>
</form>
</div>
</div>