access-control-allow-origin

When do development, especially front end and back end are separated in different projects, it is easy to get  access-control-allow-origin error when call webservices.

For this, we have some solutions:

1) For front end, we can add some proxy logic to redirect front end HTTP request through proxy, for instance, our front end application runs on http://localhost:3000, and back end application on http://localhost:8000, if front end make a service call to back end, say /api/v1/students, the call will proxyed to http://localhost:8000/api/v1/students, not http://localhost:3000/api/v1/students, thus avoiding access-control-allow-origin error from the browser. for instance, if you use gulp serve, in server.js file, you can use 'http-proxy-middleware':

var proxyMiddleware = require('http-proxy-middleware');
server.middleware = proxyMiddleware('/api', {target: 'http://localhost:8888', changeOrigin: true});

For 'http-proxy-middleware' can get more info in: https://github.com/chimurai/http-proxy-middleware

2) Otherwise, we can add some logic on back end, e.g. if we use spring framework,  we can use @CrossOrigin annotation on method, class or global level. For global enabled we can add this annotation in one of the configuration classes is OK：

@Configuration @CrossOrigin public class WebConfig { }

3) Or we can just do something without code, say if we use Chrome, we can add the plugin

This will also avoid this error.

HTML 5 form validation not work with onclick

form validation is the form been validated before submit. So if you want to use HTML 5 default form validation with the submit button which has an onclick event, the form validation will not work as it is skipped, because these validations are performed when the form is submitted, in fact the button with onclick method just call a normal js function.

In order to make the default validation rule take effect, some issues should be considered:

1) for the submit button, we can use either:
<button type="submit">Submit</button>
or
<input type="submit" value="Submit">
the key point here is we should have the attribute inside: type="submit"

2) instead of using onclick, we should use onsubmit in the <form>, for instance:
<form onsubmit="aFunction()">...</form>
and then the aFunction() should be invoked when the form validation passed.

How to do the validation inside our own js function, HTML5 introduces a concept called "constraint validation" which is an algorithm browsers run when a form is submitted to determine its validity. To make this determination, the algorithm utilizes new HTML5 attributes like min, max, step, pattern, and required as well as existing attributes maxlength and type.

Another choise is validate the form using DOM API:

validity is a DOM property that will returns a validityState object which contains several boolean properties for us to use, say we have a node:
var ele = document.getElementById('someId');

Example	Validity property	Notes
<input id="someId" pattern="[0-9]{4}" value="123" />	ele.validity.patternMismatch	true if the node's value does not match its pattern attribute
<input id="someId" type="number" max="2" value="1" />	ele.validity.rangeOverflow	true if the node's value is greater than its max attribute
<input id="someId" type="number" min="2" value="3" />	ele.validity.rangeUnderflow	true if the node's value is less than its min attribute
<input id="someId" type="email" value="abc" />	ele.validity.typeMismatch	true if an input node's value is invalid per its type attribute
<input id="someId" type="text" required value=" " />	ele.validity.valueMissing	true if the node has a required attribute but has no value
<input id="someId" type="text" required value="" />	ele.validity.valid	true if all of the validity conditions listed above are false

checkValidity()

The checkValidity method on a form element node (e.g. input, select, textarea) returns true if the element contains valid data, for instance:

if(ele.checkValidity()){
...
}

On form nodes it returns true if all of the form's children contain valid data,i.e.
if(document.forms['aForm'].checkValidity()){
        ...
}

In fact we do not need <form> but only a <div></div> to accommodate all the input controls, and using a <button onclick="aFun(...params)"></button>, the validation rule can be performed as below:

    if(document.getElementById("firstName").validity.valueMissing){
        alert('firstName is required');
        return false;
    }else{
        user.firstName = document.getElementById("firstName").value;
    }